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:

La importancia de la etiqueta < title > para el SEO
- 259
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Ejercicio sobre creación de capas html mediante etiquetas div
- 61
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.
Ejercicio html de repaso. Corrige los errores de sintaxis.
- 31
Ejercicio html dónde se plantean algunos errores comunes de alumnos al escribir html y su correción. Incluye solución.
Etiquetas audio y video de html5
- 133
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Libro digital navegable
- 45
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio estructura web mediante capas con div e id
- 62
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Como usar los encabezados h1 a h6 en html
- 356
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Como navegar por el árbol de una página web mediante enlaces html
- 78
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
Resumen de atributos html para ayudarnos a memorizar
- 311
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Como hacer espacios en blanco con html
- 287
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.
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.