Programación de páginas web (HTML y CSS) - Mapas

Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:

~- Mapas gestionados por el cliente (el navegador).

~- Mapas gestionados por el servidor.

Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos mapas. Debido a ello, Netscape elaboró un sistema propio que fue incluido en el estándar 3.2: los mapas gestionados por el navegador.

---

Mapas gestionados por el cliente

Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:

---

<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=...ALT="Enlace a..">
...
</MAP>

Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:

---

@@|| Parámetro || Utilidad ||
|| SHAPE || Define la forma de la zona, que podrá ser rectangular, circular o poligonal. ||
|| COORDS || Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona. ||
|| HREF || URL a donde irá el usuario si pulsa sobre esa zona. ||
|| NOHREF || Especifica que esa zona no tiene asignado enlace alguno. ||
|| ALT || Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace. ||
@@




Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:

---

@@||
|| SHAPE || COORDS ||
|| Rectangular || RECT || "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. ||
|| Circular || CIRC || "x,y,radio" siendo (x,y) el centro del círculo y radio su... eehh.. ¿cómo lo diría yo? ¿Su radio?. ||
|| Polígono irregular || POLY || "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono. ||
|| Toda la imagen || DEFAULT || No se indican. ||
@@

---

Cómo usar un mapa


Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:

---

<IMG SRC=... USEMAP="#mi_mapa">

---

Siempre tenemos que añadir al comienzo del nombre de nuestro mapa un sostenido(#).