Con los mapas de imagen se pueden añadir zonas clicables sobre una imagen.
La etiqueta <map> define un mapa de imagen con áreas clicables.
En el ejemplo de abajo puedes clicar sobre la piña, una calabaza y el ordenador.
<img src="https://kikopalomares.com/pi%C3%B1a-calabaza-mac.jpg" alt="Escritorio con fruta" usemap="#map" width="400">
<map name="map">
<area shape="rect" coords="210, 0, 400, 160" alt="Computadora" href="https://es.wikipedia.org/wiki/Computadora">
<area shape="circle" coords="100, 215, 35" alt="Calabaza" href="https://es.wikipedia.org/wiki/Calabaza">
<area shape="circle" coords="25, 190, 50" alt="Piña" href="https://es.wikipedia.org/wiki/Ananas_comosus">
</map>
Necesitamos una imagen y una etiqueta <map> que contiene la información de las áreas clicables.
La imagen se inserta con un <img>. Y le añadimos el atributo usemap.
<img src="imagen.jpg" alt="Imagen" usemap="#map">
El valor del usemap empieza con un # seguido del name del mapa que queramos vincular.
Es un elemento <map> y se vincula a través del atributo name a la imagen.
<map name="map">
El elemento <map> se puede insertar en cualquier parte del documento, no afecta el orden.
Dentro de la etiqueta <map> añadimos las áreas clicables usando la etiqueta <area>.
Tenemos diferentes formas:
rect: para una forma rectangular.circle: para una forma circular.poly: define un polígono como región.default: define toda la región.
Hay que definir las coordenadas donde estará el área clicable.
Las coordenadas van de dos en dos valores, para el eje x y el eje y. Y se cuenta en pixeles.
En el ejemplo de arriba, la primera área tiene 210 pixeles de margen desde la izquierda, y 0 pixeles de margen desde arriba. Y 400 pixeles desde la izquierda y 160 desde arriba.
<area shape="rect" coords="210, 0, 400, 160">
Tan solo tienen una coordenada, y el tercer parámetro es el radio del circulo.
<area shape="circle" coords="100, 215, 35">
Se le puede añadir el atributo href para definir el destino al que va el enlace.
También un área puede llamar a una función de JavaScript usando el onclick.
<area shape="rect" coords="210, 0, 400, 160" alt="Computadora" onclick="clickFunction()">
