Etiqueta HTML <map>
La etiqueta <map> se utiliza para especificar un mapa de imagen, con áreas activas, donde puedes hacer clic para obtener más información. Las áreas clicables en el mapa de imagen se definen usando la etiqueta <area>, anidada dentro de la etiqueta <map>.
La etiqueta <map> se utiliza para conectar la etiqueta <img> con un mapa de imagen del lado del cliente, lo que significa que el navegador es responsable de interpretar el código y renderizar el mapa de imagen. Para crear una relación entre la imagen y el mapa, se usa el atributo obligatorio name con la etiqueta <map>, y el atributo usemap con la etiqueta <img>.
Sintaxis
La etiqueta <map> viene en pares. El contenido se escribe entre las etiquetas de apertura (<map>) y cierre (</map>).
Ejemplo de la etiqueta HTML <map>:
Etiqueta HTML <map>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo items to watch it closer:</p>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png" width="145" height="126" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
<area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
<area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
</map>
</body>
</html>Atributos
| Attributes | Value | Description |
|---|---|---|
| name | mapname | Establece el nombre de un mapa de imagen. |
El elemento <map> también usa los atributos globales.
Práctica
¿Qué es cierto sobre la etiqueta HTML <map> tal como se describe en la página web enlazada?