Descripción
El elemento map de HTML nos permite definir áreas de enlace dentro de una imagen. Este elemento se utiliza en conjunto con el elemento img y el atributo usemap para crear mapas de imagen interactivos. Con el elemento map podemos definir diferentes áreas dentro de una imagen que actuarán como enlaces independientes.
Sintaxis
<map>
Atributos
Atributos Globales
- accesskey
- autocapitalize
- autofocus
- contenteditable
- dir
- draggable
- enterkeyhint
- hidden
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- nonce
- spellcheck
- style
- tabindex
- title
- translate
Ejemplo
Un ejemplo del uso del elemento map sería el siguiente, donde definimos un mapa de imagen con diferentes áreas enlazables:
<map name="ejemplo-mapa">
<area shape="rect" coords="0,0,100,100" href="enlace1.html" alt="Área 1">
<area shape="circle" coords="150,150,50" href="enlace2.html" alt="Área 2">
<area shape="poly" coords="200,50,250,100,200,150" href="enlace3.html" alt="Área 3">
</map>
<img src="imagen.jpg" usemap="#ejemplo-mapa" alt="Imagen con áreas enlazables">
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.