Etiqueta HTML map - Aprende HTML

La etiqueta HTML <map> define un mapa de imagen del lado del cliente — una imagen cuyas distintas regiones enlazan a diferentes destinos. En lugar de un único enlace para toda la imagen, se marcan varias "zonas activas" sobre ella. Cada zona activa se describe con un elemento <area>, y todos los elementos <area> se encuentran dentro de un único <map>.

Se denomina mapa de imagen del lado del cliente porque el navegador gestiona toda la interpretación y representación de las regiones de forma local — no se necesita ningún viaje de ida y vuelta al servidor para determinar en qué región se hizo clic.

Esta página explica cómo se conecta un <map> a su imagen, cómo definir las regiones clicables con <area>, los requisitos de accesibilidad y cuándo un mapa de imagen es (y no es) la herramienta adecuada.

Cómo `<map>` se conecta a una imagen

Un <map> no hace nada por sí solo. Debe ser referenciado por una imagen mediante dos atributos que deben coincidir:

En el <map>: el atributo name, por ejemplo <map name="planets">.
En el <img>: el atributo usemap, que apunta a ese nombre con un # inicial, por ejemplo <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Reglas de conexión a tener en cuenta:

El prefijo # solo se requiere en usemap. El valor de name se escribe sin el #; el valor de usemap se escribe con él (es una referencia de fragmento). name="planets" ↔ usemap="#planets".
Los valores distinguen entre mayúsculas y minúsculas. usemap="#Planets" no coincidirá con name="planets".
El name debe ser único en el documento y no puede estar vacío.
Los elementos <area> deben estar dentro de <map>. Un <area> colocado en otro lugar no tiene efecto.

Si los nombres no coinciden exactamente, la imagen simplemente se muestra sin regiones clicables y no se muestra ningún error — un error silencioso habitual.

Definición de regiones clicables con `<area>`

Cada región es un elemento <area>. Dos atributos describen su geometría y el resto describe el enlace:

Atributo	Función
`shape`	Tipo de región: `rect`, `circle`, `poly` o `default`.
`coords`	Coordenadas que definen la región, en píxeles CSS.
`href`	URL de destino de la región.
`alt`	Texto alternativo de la región (obligatorio cuando `href` está presente).
`target`	Dónde abrir el enlace (`_blank`, `_self`, etc.).

El significado de coords depende de shape:

Forma	Formato de `coords`	Significado
`rect`	`x1,y1,x2,y2`	Esquinas superior izquierda e inferior derecha de un rectángulo.
`circle`	`x,y,r`	Punto central `x,y` y radio `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Lista de puntos que forman un polígono (cada par es un vértice).
`default`	(ninguno)	Toda la imagen que no esté cubierta por otra área.

Todas las coordenadas se miden desde la esquina superior izquierda de la imagen (0,0), en píxeles, relativas al tamaño intrínseco de la imagen.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Sintaxis

La etiqueta <map> va 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="/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>

Pruébalo tú mismo »

Atributos

Atributos	Valor	Descripción
name	mapname	Establece el nombre de un mapa de imagen.

El elemento <map> también utiliza los Atributos Globales.

Accesibilidad

Los mapas de imagen son completamente visuales a menos que se haga lo necesario para cambiar esto, por lo que hay algunas reglas importantes:

Cada <area> enlazada necesita un alt significativo. Los lectores de pantalla anuncian cada área por su texto alt, exactamente como hacen con los enlaces. Un alt vacío o ausente en un área clicable deja el enlace sin etiqueta.
El alt debe describir el destino, no la imagen. "Abrir la página de contacto" es más útil que "círculo azul".
La navegación por teclado funciona automáticamente para las áreas que tienen un href: cada una se convierte en un enlace enfocable y accesible por tabulación. Evite colocar interactividad solo en una región sin href, ya que no será accesible mediante el teclado.
No dependa de zonas activas muy pequeñas. Las regiones pequeñas o de formas extrañas son difíciles de seleccionar con el ratón, la pantalla táctil o un puntero asistivo.

Cuándo usarlo (y cuándo no)

Los mapas de imagen del lado del cliente son una función antigua que aún funciona, pero hoy en día solo encaja en un conjunto reducido de casos.

Uso razonable: una única imagen rasterizada (una foto, un diagrama, un plano escaneado) donde un puñado de regiones rectangulares o circulares necesitan enlazar a algún lugar, y la imagen no se redimensionará de forma responsiva.

Evite <map> cuando:

El diseño es responsivo. Los valores de coords son píxeles fijos vinculados al tamaño intrínseco de la imagen; no escalan cuando la imagen se redimensiona con CSS, por lo que las zonas activas se desplazan fuera de su posición.
Las regiones son botones, menús o algo complejo. Constrúyalos con HTML/CSS real en su lugar.

Para la mayoría de las necesidades modernas existen mejores alternativas:

Anclas superpuestas con CSS — coloque elementos <a> con posición absoluta (en porcentajes) sobre una imagen responsiva. Esto escala correctamente y es totalmente accesible.
<svg> en línea — dibuje formas como elementos reales, escalables y con estilo, y envuelva cada forma clicable en un <a>. Esta es la opción más flexible para diagramas y regiones complejas.

Consulte también Enlaces HTML para conocer el comportamiento de los anclas y los destinos de los enlaces.

Práctica

¿Qué afirmación es verdadera sobre la etiqueta HTML <map> según se describe en la página web vinculada?

La etiqueta HTML <map> se usa para crear un mapa de imagen.La etiqueta <map> no es compatible con HTML5.La etiqueta <map> define un mapa de imagen del lado del cliente. Un mapa de imagen es una imagen con áreas clicables.La etiqueta <map> no se puede usar con elementos <area> para definir las áreas clicables en el mapa de imagen.El elemento <map> no contiene uno o más elementos <area> que definen las áreas clicables en el mapa de imagen.

Cómo <map> se conecta a una imagen

Definición de regiones clicables con <area>