HTML Mapas de imágenes

Cuando hablamos de mapas de imágenes, hablamos de imágenes sensibles. Estas son las que contienen zonas activas que funcionarán como enlaces.

Este tipo de mapas se pueden procesar en dos puntos, en el servidor donde tenemos alojada nuestra página, lado del servidor (ismap) o en el ordenador donde se abra la página web, lado del cliente (usemap)

Lo más común es que el procesado se realice en el lado del cliente:

En primer lugar realizamos el mapeo, definimos dicho mapa dentro de una imagen añadiendo una almohadilla delante del nombre de la siguiente manera:
<img usemap="#ejemplo" />

A continuación definimos el nombre del mapa con la etiqueta:
<map name="ejemplo">...</map>
Entre la etiqueta de apertura y la de cierre introduciremos  todas las zonas activas mediante una etiqueta por zona activa. Estas zonas activas pueden ser cuadrados, circunferencias o polígonos. Sus etiquetas en este orden serian las siguientes:

Zona rectangular desde un punto (x1,y1) al punto opuesto en su diagonal (x2,y2)
<area shape="rect" coords="x1,y1,x2,y2" href="" alt"" />

Zona circular desde un punto (x,y) tomando como radio (r)
<area shape="circle" coords="x,y,r" href="" alt"" />

Zona poligonar insertando de forma seguida todos los puntos que componen dicho polígono mediante coordenadas (x,y)
<area shape="poly" coords="x1,y1,x2,y2, ... ,xn,yn" href="" alt"" />


Un ejemplo completo sería el siguiente:
<img src="imagen.png" width="100" heigth="100" usemap="#ejemplo" />
<map name="ejemplo">
<area shape="rect" coords="10,10,40,40" href="rectangulo.html" alt"esto es un rectangulo" />
<area shape="circle" coords="80,80,2" href="circulo.html" alt"esto es un circulo" />
<area shape="poly" coords="10,45,10,60,80,60" href="poligono.html" alt"esto es un poligono" />
</map>