Los mapas de imágenes en la web

Recordemos que los enlaces en las páginas web podían escribirse con un texto o con una imagen. Es decir podíamos tener una imagen que al ser pulsada con el ratón nos llevaba a otra página. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:

Gestionando el mapa en el navegador.
Gestionando el mapa en el servidor.

Los más utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no exigen ningún apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia página.

arriba

Mapas lado cliente

Un mapa no es más que una imagen en la que se definen zonas activas, o sea, zonas que al ser pulsadas con el ratón actúan como un enlace y nos llevan a otras páginas. Su creación tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen:

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

La descripción del mapa es de lo más simple: le damos nombre (para luego poderle asociar la imagen) y definimos las zonas activas (formas geométricas como verás a continuación):

Parámetro	Significado
`SHAPE`	Define la forma de la zona: rectangular, circular o poligonal.
`COORDS`	Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la forma.
`HREF`	URL del enlace corespondiente a esta zona.
`NOHREF`	Zona inactiva
`ALT`	Texto alternativo, etiqueta idéntica al ALT de IMG

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

	SHAPE	COORDENADAS
Rectangular	`RECT`	"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
Circular	`CIRC`	"x,y,r" siendo (x,y) el centro del círculo y r el 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 necesitan

arriba

Usando los mapas

Una vez definido como es el mapa lo aisgnamos a una imagen:

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

Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo:

<MAP NAME="navegadores">
  <AREA SHAPE=RECT COORDS="0,0,24,31"
        HREF="http://www.apache.org" ALT="Servidor Apache">
  <AREA SHAPE=RECT COORDS="26,0,53,31"
        HREF="http://www.w3c.org" ALT="la W3C">
  <AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
</MAP>
<IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">

Se ve tal que así:

Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningún URL por si el usuario pulsa fuera de las zonas activas.

arriba