Mapas de imagen en html

Mapas de imagen en html

Print Friendly, PDF & Email
Mapas de imagen en html
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!

Entradas relacionadas:

Enlaces en html: la etiqueta a
- 151
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Qué es un favicon y para que sirve
- 100
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Resumen de como comentar código en html, css y javascript
- 311
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 238
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Creación de formularios html
- 540
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Etiquetas xmp, pre y code en HTML
- 690
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Ejemplo de creación de página web con capas y migración a HTML5
- 742
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Como hacer espacios en blanco con html
- 117
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 583
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
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.