Mapas de imagen en html

Mapas de imagen en html

Print Friendly, PDF & Email
Valora esta entrada

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

Resumen HTML mapa web
Resumen HTML mapa web

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.

Y ahora quedaría resolver una caso real de mapa de imagen. Pero esto queridos lector@es lo publicaré más adelante.

¡Hasta mañana!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.