Con los mapas de imágenes HTML, puedes crear áreas en las que se puede hacer clic en una imagen.
Mapa de imágenes
La etiqueta HTML <map> define un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puede hacer clic. Las áreas se definen con una o más etiquetas <area>.
En la siguiente imagen, haz clic en la computadora, el teléfono o la taza de café:
Ejemplo:
¿Cómo funciona?
La idea detrás de un mapa de imagen es que deberías poder realizar diferentes acciones según el lugar de la imagen en el que haga clic.
Para crear un mapa de imagen, necesitas una imagen y algo de código HTML que describa las áreas en las que se debe hacer clic.
La imagen
La imagen se inserta usando la etiqueta <map>. La única diferencia con otras imágenes es que debes agregar un atributo usemap:
Ejemplo
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
El valor del atributo usemap comienza con hashtag # seguido del nombre del mapa de imagen, y se usa para crear una relación entre la imagen y el mapa de imagen.
Tip: puedes usar cualquier imagen como un mapa de imagen.😎
Crea un mapa de imagen
Luego, agrega un elemento <map>.
El elemento <map> se utiliza para crear un mapa de imagen y se vincula a la imagen mediante el atributo requerido name:
<!-- Mapa de imagen -->
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<!-- Vincular con el mapa de imagen -->
<map name="workmap">
El atributo name debe tener el mismo valor que el atributo usemap del elemento <img>.
Las áreas
Luego, agrega las áreas donde se debe hacer clic.
Un área donde se debe hacer clic, se define usando un elemento <area>.
Formas
Debes definir la forma del área en la que se debe hacer clic, y puedes elegir uno de estos valores:
rect- define una región rectangularcircle- define una región circularpoly- define una región poligonaldefault- define toda la región
También debes definir las coordenadas para poder ubicar el área en la que se debe hacer clic en la imagen.
Región rectangular
Las coordenadas para shape="rect" vienen en pares, una para el eje x y otra para el eje y.
Entonces, las coordenadas 34, 44 se ubican a 34px del margen izquierdo y a 44px de la parte superior.
Las coordenadas 270, 350 se ubican a 270px del margen izquierdo y 350px de la parte superior.
Ahora tenemos suficientes datos para crear un área rectangular en donde se puede hacer clic:👏
Ejemplo:
<!-- Ejemplo del caso anterior -->
<area shape="rect" coords="34, 44, 270, 350" href="computador.html" alt="Workplace">
Este es el área👇 en la que se puede hacer clic y enviará al usuario a la página "computer.html":
Región circular
Para agregar un área circular, primero ubique las coordenadas del centro del círculo: 337, 300👇
Luego especifique el radio del círculo: 44px👇
Ahora tenemos suficientes datos para crear un área circular en la que se puede hacer clic:
Ejemplo:
<area shapre="circle" coords="337, 300, 44" href="coffee.html">
Este es el área👇 en la que se puede hacer clic y enviará al usuario a la página "coffee.html".
Región poligonal
La forma shape="poly" contiene varios puntos de coordenadas, lo que crea una forma compuesta con líneas rectas.
Esto se puede utilizar para crear cualquier forma.
Como tal vez una forma de croissant.
¿Cómo podemos hacer que el croissant de la siguiente imagen se convierta en un área en el que se puede hacer clic?🤔
Tenemos que encontrar las coordenadas x y y para todos los lados del croissant:
Las coordenadas vienen en pares, uno para el eje x y otro para el eje y.
Ejemplo:
<!-- Area poligonal -->
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"
href="croissant.html">
Este es el área👇 en la que se puede hacer clic y enviará al usuario a la página "croissant.html".
Mapa de imágenes y JavaScript
Un área donde se puede hacer clic también puede activar/invocar una función JavaScript.
Agrega un event clic al elemento <area> para ejecutar una función JavaScript:
Ejemplo:
Resumen
Usa el elemento
<map>para definir un mapa de imagenUsa el elemento
<area>para definir las áreas en las que se pueden hacer clic en el mapa de imagenUsa el atributo
usemapdel elemento<img>para relacionar un mapa de imagen
Traducido con 💚 desde W3Schools.com