Creando mapas de imágenes

El mapeo de imágenes sirve para conseguir que diferentes partes de una misma imagen se comporten como enlaces distintos.

El mapeo se consigue con la etiqueta map, que establece el conjunto de zonas a mapear en la imagen, y las etiquetas area, que definen las diferentes zonas interactivas sobre la imagen.

Las áreas pueden definirse como rectángulos, circunferencias, o figuras poligonales. Para ello se usa el atributo shape dentro de la etiqueta area, que tomará los respectivos valores: rect,circ, poly.

Cada área se define con los puntos mínimos necesarios para conseguir esa forma sobre el mapa de píxeles de la imagen. Y cada punto se establece con un par de valores separados por una coma. El primer valor se refiere a los píxeles sobre el eje x (partiendo del extremo izquierdo de la imagen), y el segundo a la posición sobre el eje y (partiendo desde el extremo superior). Estos puntos se definen en el atributo coords separados todos ellos por comas.

Otros atributos de la etiqueta area son los relativos a los enlaces, como href para definir el destino del vínculo, title o target.

Hay que tener en cuenta que la imagen no es troceada ni seccionada de ninguna manera, sino que actua como fondo para las zonas activas que colocaremos sobre ella con las etiquetas mencionadas.

Por último, para vincular una imagen con su mapa usaremos el atributo usemap en la imagen, y el atributo name en el mapa. El valor para ambos atributos debe ser el mismo, pero en el caso de la imagen tiene que llevar delante el carácter #.

IMPORTANTE: Si redefinimos el tamaño de la imagen por CSS después de mapearla, las coordenadas de las áreas no coincidirán con la imagen y el resultado será incorrecto. Es necesario mantener el tamaño de la imagen constante para que coincida con la coordenadas del mapeo.

Veamos los diferentes casos