Crear zonas clickeables dentro de una imagen es una de esas cosas que parecen magia la primera vez que las ves. Y sí, todavía se usan más de lo que parece: infografías interactivas, planos, mapas reales, diagramas y hasta imágenes educativas.
En HTML esto se logra con una pareja potente: los elementos <map> y <area>.
Cuando yo trabajé por primera vez con ellos con una imagen del sistema solar descubrí que son mucho más flexibles de lo que imaginaba. Y también más quisquillosos: si una coordenada falla, todo se rompe.
Anteriormente vimos, como crear un Modal HTML
Con el elemento <area> es posible crear zonas clickeables dentro de una imagen; el elemento <area> debe de contener elementos hijos llamados <map> que son los que permite crear las zonas clickeables como tal a través de las coordenadas establecidas en el mismo como atributos; a continuación la tabla de contenido:
¿Qué es un mapa de imagen en HTML?
Un mapa de imagen (image map) es simplemente una imagen con zonas seleccionables.
Cada zona se define mediante un elemento <area>, y todas estas zonas viven dentro de un <map>.
La idea es:
- <img> = tu imagen.
- usemap="#nombre" = conecta la imagen con el mapa.
- <map name="nombre"> = contiene tus áreas.
- <area> = cada región clickeable, con forma y coordenadas.
Son perfectos cuando quieres que el usuario pueda “explorar” una imagen.
Cómo funciona la relación <img> + usemap + <map> + <area>
Cuando implementé mi mapa de planetas, lo primero que entendí fue esto:
- Tu imagen debe incluir usemap="#algo".
- Debes crear un <map name="algo">.
- Dentro del <map> defines tantas áreas como quieras.
Ejemplo general:
<img src="imagen.jpg" alt="Mapa interactivo" usemap="#zonas">
<map name="zonas">
<area shape="rect" coords="10,10,100,50" href="enlace1.html" alt="Sección 1">
<area shape="circle" coords="200,150,40" href="enlace2.html" alt="Sección 2">
</map>Una vez entendido esto, todo lo demás es geometría.
1. Atributos esenciales del elemento <area>
Los atributos principales para el elemento <area>son utilizados para:
| alt | Especificar un texto alternativo. |
| coords | Especificar las coordenadas del área; segun la cantidad de parámetros indica una figura distinta:
|
| download | Especificar un recurso (archivo) para su descarga. |
| href | URL. |
| target | Específica donde abrirá la nueva ventana, referenciada en el atributo href. |
shape: rect, circle, poly y default
Define la forma del área.
- rect → rectángulo
- coords="x1,y1,x2,y2"
- circle → círculo
- coords="x,y,radio"
- poly → polígono con múltiples puntos
- coords="x1,y1,x2,y2,x3,y3,..."
default → toda la imagen (se usa muy poco)
Cuando trabajé con la imagen de los planetas que puedes ver en los enlaces anteriores, usé casi puro circle, porque las figuras encajaban mejor y las coordenadas eran más intuitivas.
coords: cómo definir coordenadas correctamente
Aquí suele venir el drama: las coordenadas deben ser exactas.
En mi caso, al intentar hacerlo “a ojo”, terminé marcando Saturno donde estaba Marte.
Solución: usar un editor de imágenes (más abajo te cuento cuáles y cómo).
Cada shape tiene su formato:
- rect: x1,y1 = esquina superior izquierda; x2,y2 = esquina inferior derecha.
- circle: x,y = centro; r = radio.
- poly: secuencia de puntos unidos entre sí.
href, alt, target y download
Son los atributos que convierten tu área en un enlace real.
- href → la URL a la que lleva.
- alt → texto alternativo (importantísimo para accesibilidad).
- target → dónde abre (_blank, _self, etc.).
- download → permite descargar un recurso al hacer clic.
Cuando añadí descargas en uno de mis primeros mapas, descubrí que <area download> funciona exactamente igual que en <a>.
Atributos avanzados: rel, ping, referrerpolicy
Pocas guías los mencionan, pero existen y se usan:
rel → relación con el destino (nofollow, noreferrer…).
ping → URLs para tracking.
referrerpolicy → cómo se envía el encabezado Referer.
Si vas a usar <area> en proyectos reales, es bueno conocerlos aunque no los uses todos.
2. Uso del elemento <area> y <map>
Se debe definir una imagen a través de la etiqueta <img> y posteriormente se definen las zonas clickeables con las coordenadas establecidas como atributo del elemento <area>, a su vez se le establece a la imagen un atributo usemap que indique el nombre del <map>que definiremos posteriormente:
<img src="sistema_solar_planetas.png" width="700" height="300" alt="planetas del sistema solar" usemap="#planetasmap">Ahora definimos el elemento <map> cuyos hijos son elementos <area>, se les establece a cada uno de estos elementos el atributo coords (coordenadas); para nuestro ejemplo definiremos tantos <area> con sus coordenadas como planetas albergue el Sistema Solar; además, al elemento <map> debe de definirse un atributo name cuyo valor sea el establecido en la imagen a través del atributo usemap (usemap = name):
<map name="planetasmap">
<area shape="circle" coords="35,224,17" href="#" alt="Mercury">
<area shape="circle" coords="95,220,26" href="#" alt="Venus">
<area shape="circle" coords="165,217,29" href="#" alt="Tierra">
<area shape="circle" coords="241,219,31" href="#" alt="Marte">
<area shape="circle" coords="392,226,66" href="#" alt="Jupiter">
<area shape="circle" coords="512,233,28" href="#" alt="Saturno">
<area shape="circle" coords="600,231,28" href="#" alt="Urano">
<area shape="circle" coords="668,229,28" href="#" alt="Neptuno">
</map>Posibles usos de los elementos <area> y <map>
Un uso común consiste en referenciar los <area>a páginas (a través del atributo href); también se puede referenciar recursos para su descarga (a través del atributo download):
Clickea los planetas en el siguiente ejemplo:
Puede que resulte un poco complicado el intentar adivinar las coordenadas para obtener la posición exacta que se desee marcar a través de las coordenadas, por suerte hay softwares para la edición de imágenes como Gimp o Photoshop que cuentan con herramientas que indican la posición del cursor sobre la imagen, lo cual resulta en una gran ayuda para lograr obtener las coordenadas.
Ejemplos prácticos de mapas de imagen
Nada como verlos en acción.
Ejemplo básico con rectángulos
<img src="tienda.jpg" alt="Tienda" usemap="#zonas">
<map name="zonas">
<area shape="rect" coords="20,20,150,200" href="camisas.html" alt="Camisas">
<area shape="rect" coords="200,20,350,200" href="pantalones.html" alt="Pantalones">
</map>Ejemplo con figuras complejas (círculos y polígonos)
<img src="mapa.jpg" alt="Mapa" usemap="#mapa">
<map name="mapa">
<area shape="circle" coords="120,120,40" href="#punto1" alt="Punto circular">
<area shape="poly" coords="10,10,60,10,40,50" href="#triangulo" alt="Zona triangular">
</map>Ejemplo aplicado: mapa de planetas (basado en mi experiencia)
Cada planeta era un <area> circular con su propio enlace:
<img src="sistema_solar.png" width="700" height="300" alt="Planetas" usemap="#planetas">
<map name="planetas">
<area shape="circle" coords="35,224,17" href="#" alt="Mercurio">
<area shape="circle" coords="95,220,26" href="#" alt="Venus">
<area shape="circle" coords="165,217,29" href="#" alt="Tierra">
<area shape="circle" coords="241,219,31" href="#" alt="Marte">
</map>Hacer coincidir cada círculo con su planeta fue el mayor desafío… hasta que descubrí las herramientas de la siguiente sección.
Cómo obtener coordenadas exactas para un <area> (tips reales)
Esto nadie te lo dice, pero es la clave para hacer mapas precisos.
Cuando intenté calcular coords manualmente, me volví loco.
La solución fue usar herramientas que muestran la posición del cursor en tiempo real:
- Opciones recomendadas
- Gimp (gratuito)
- Photoshop
- Figma
- Photopea (online)
- Aquí está lo que hago siempre:
- Abro la imagen.
- Activo la regla o el panel de coordenadas.
- Muevo el ratón hasta el punto deseado.
- Anoto X e Y exactos.
Y listo: coords milimétricamente precisas sin sufrir.
Buenas prácticas de accesibilidad y SEO técnico
- Siempre usa alt en cada <area>.
- Usa formas simples cuando sea posible.
- Si tu imagen es informativa, incluye una alternativa textual.
- Si hay muchas áreas, considera también enlaces alternativos en texto.
- Evita usar <area> para navegación crítica en móviles (las zonas son difíciles de pulsar).
Errores comunes y cómo evitarlos
- ❌ usemap="mapa" → debe ser usemap="#mapa".
- ❌ <map name="mapa"> con nombre distinto al usemap.
- ❌ Coordenadas invertidas (“y1,x1…”).
- ❌ No usar alt.
- ❌ Usar imágenes muy grandes sin escalar (las coords cambian).
Una vez tuve que rehacer todas las coords porque exporté la imagen 300px más ancha… aprendí a fijar siempre el tamaño final antes de calcular nada.
Preguntas frecuentes sobre <area> y <map>
- ¿Se siguen usando los mapas de imagen hoy en día?
- Sí, sobre todo en educación, diagramas interactivos y dashboards visuales.
- ¿Las coords cambian si cambio el tamaño de la imagen?
- Sí. Debes usar la imagen a tamaño fijo o generar coords nuevas.
- ¿Puedo usar formas irregulares?
- Claro: shape="poly" con tantos puntos como quieras.
- ¿Puedo descargar archivos desde un área?
- Sí: <area download> funciona igual que <a download>.
✔ Conclusión
Los elementos <map> y <area> son una herramienta sorprendentemente eficaz para crear imágenes totalmente interactuables en HTML. No requieren JavaScript, son livianos y funcionan en prácticamente cualquier navegador.
Si entiendes cómo funcionan shape, coords, la relación usemap–name, y usas herramientas para obtener coordenadas precisas, puedes crear experiencias visuales muy profesionales.
Ahora aprende a usar la etiqueta datalist HTML