HTML map
La etiqueta <map> en HTML es utilizada para crear un mapa de imágenes, que permite definir zonas de una imagen que pueden ser enlazadas a otras páginas web o a otras partes de la misma página.
Es un elemento de bloque que permite asociar un conjunto de etiquetas <area> con una imagen específica.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<img src="image.jpg" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,50,50" href="link1.html">
<area shape="rect" coords="50,0,100,50" href="link2.html">
</map>
Lenguaje del código: HTML, XML (xml)En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está creando un mapa de imagen con el nombre “image-map” y se están definiendo dos zonas rectangulares con coordenadas específicas, las cuales están vinculadas a dos links diferentes.
Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, pero puede no ser soportada en algunos navegadores antiguos.
Atributos
Los atributos más importantes de la etiqueta <map> en HTML son:
- name: especifica un nombre para el mapa, que se utilizará para vincularlo con una o varias etiquetas
<img>
- class: permite aplicar estilos css al mapa.
La etiqueta <map> debe tener un conjunto de etiquetas <area> como hijas, las cuales definen las zonas de la imagen que serán vinculadas.
Más ejemplos
Aquí te proporciono un ejemplo más avanzado de cómo utilizar la etiqueta <map> en HTML:
<img src="image.jpg" usemap="#image-map" class="image-class">
<map name="image-map" class="image-map-class">
<area shape="rect" coords="0,0,50,50" href="link1.html" alt="Area 1" title="Area 1">
<area shape="circle" coords="100,75,25" href="link2.html" alt="Area 2" title="Area 2">
<area shape="poly" coords="200,10,215,25,225,50,200,75,175,50,185,25" href="link3.html" alt="Area 3" title="Area 3">
</map>
Lenguaje del código: HTML, XML (xml)En este ejemplo se está utilizando una imagen llamada “image.jpg” y se está asignando una clase css “image-class” a la etiqueta <img>. Se está creando un mapa de imágenes con el nombre “image-map” y se está asignando una clase css “image-map-class” a la etiqueta <map>.
Se están definiendo tres zonas con diferentes formas (rectángulo, círculo y polígono) con coordenadas específicas, las cuales están vinculadas a tres links diferentes, y se está proporcionando un texto alternativo y un título para cada una de las zonas.
En este ejemplo se puede ver cómo se pueden utilizar diferentes formas y atributos para definir las zonas del mapa, lo que permite una mayor flexibilidad y precisión al vincular zonas de una imagen con enlaces o acciones.
Es importante mencionar que en este ejemplo se está utilizando la propiedad usemap en la etiqueta <img> para vincular la imagen con el mapa que se está creando. El valor de esta propiedad debe ser el nombre del mapa precedido de un signo de gato “#”, en este caso es “#image-map”.
También cada una de las etiquetas <area> dentro del mapa, tiene un atributo shape el cual indica la forma de la zona, las opciones son “rect” para rectángulos, “circle” para círculos y “poly” para polígonos.
El atributo coords especifica las coordenadas de las zonas, las cuales varían dependiendo de la forma y el número de puntos. El atributo href indica el enlace al que se dirige la zona, y alt y title proporciona un texto alternativo y un título para la zona respectivamente.