Mapas de imagen en html

Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen.

Por ejemplo dado el contorno de un círculo podríamos hacer que la parte exterior enlazara a un sitio web y la parte interior a otro.

En la actualidad hay quién considera obsoletos los mapas de imágenes por no adaptarse a un diseño adaptativo.

Sin embargo soy de la opinión que son un conjunto de etiquetas y propiedades interesantes de conocer porqué combinados con javascript pueden ser verdaderamente potentes.

Veamos com se hace un mapa de imágenes

Estructura básica de un mapa de imagen

Usaremos las etiquetas map, area y img. Y los siguientes atributos

• map: atributo name
• area: atributos shape, coords y href
• img: atributos src, usemap

Valores que pueden tomar los atributos

Shape puede tomar los valores rect | circle | poly

En un rectángulo es necesario indicar como mínimo los dos puntos opuestos de una diagonal. x1, x2 y y1,y2

Para un círculo es necesario mostrar el centro x1, x2 de la circunferencia y un radio.

Para las estructuras poligonales iremos definiendo las coordenadas de todos los puntos.

Una correcta manera  de averiguar las coordenadas en photoshop o con el paint. Pasando el ratón por encima de la imagen os dirá la coordenada exacta del cursor respecto de la imagen.

Consideraciones a tener en cuenta

Define las zonas de dentro a fuera. De más pequeña a más grande.

En caso de querer una zona que no sea clicable una opción es definirla igualmente pero indicar el enlace con #

En el caso de una línea poligonal asegúrate que no se entrecruza en ningún momento. Coge el contorno un poco más grande si es necesario.

Comprueba la ubicación del punto 0,0 del dibujo antes de empezar a determinar coordenadas. Los mapas de imágenes se olvidan con facilidad y te ahorrarás rehacer todo el trabajo 2 veces.