Mapa de Imagen en HTML: Concepto y Uso Práctico

Los mapas de imagen permiten dividir una única imagen en varias áreas clicables, cada una enlazando a destinos diferentes. Aunque su origen se remonta a los primeros días de la web, siguen siendo útiles para diagramas, planos, infografías y UI personalizadas.

¿Qué es un mapa de imagen?

Un mapa de imagen es una combinación de los elementos <img> y <map> que define áreas (<area>) con coordenadas específicas. Cada <area> puede ser de tipo rect, circle o poly y contiene atributos clave como href, alt y title.

Ejemplo básico de mapa de imagen (rectángulo y círculo)

El siguiente fragmento muestra una imagen de un plano de oficina con dos áreas: una habitación (rectángulo) y una mesa redonda (círculo).

<!-- Imagen principal -->
<img src="/assets/plano-oficina.png" alt="Plano de oficina" usemap="#oficinaMapa" class="img-fluid">
<!-- Definición del mapa -->
<map name="oficinaMapa" id="oficinaMapa">
  <area shape="rect" coords="120,80,300,200" href="/habitacion" alt="Habitación" title="Ver habitación">
  <area shape="circle" coords="450,150,40" href="/mesa" alt="Mesa redonda" title="Detalles de la mesa">
</map>

Observa que:

• Se usa usemap="#oficinaMapa" (el signo # es obligatorio).
• Las coordenadas están en píxeles y se calculan respecto al origen (0,0) de la imagen.
• El atributo alt es esencial para accesibilidad y SEO.

Áreas poligonales y generación dinámica de coordenadas

Para formas irregulares, shape="poly" permite definir cualquier número de puntos (x,y) separados por comas.

<area shape="poly" coords="
  50,30,  80,55,  90,120,  60,150,  30,110" 
  href="/zona-irregular" alt="Zona irregular" title="Zona con forma personalizada">

Si necesitas crear mapas para imágenes responsivas, puedes usar la librería imageMapResize o la solución nativa object-fit combinada con JavaScript para recalcular coordenadas al redimensionar.

Accesibilidad y SEO

Los mapas de imagen pueden ser problemáticos para usuarios de lectores de pantalla. Sigue estas buenas prácticas:

• Proporciona alt descriptivo en cada <area>. El texto debe describir la acción o el contenido al que lleva.
• Incluye un title para ofrecer información adicional al pasar el ratón.
• Ofrece una alternativa textual debajo de la imagen (lista de enlaces) para usuarios que no puedan interactuar con el mapa.
• Usa ARIA como role="region" y aria-label en el <map> si la imagen tiene múltiples funcionalidades.

Ejemplo de alternativa textual:

<ul class="list-unstyled mt-3" aria-label="Enlaces del mapa de imagen">
  <li><a href="/habitacion">Habitación (ver detalle)</a></li>
  <li><a href="/mesa">Mesa redonda (ver detalle)</a></li>
</ul>

Rendimiento, Compatibilidad y Escalabilidad

Los mapas de imagen son compatibles con todos los navegadores modernos y con versiones de Internet Explorer 11 y superiores. No obstante, ten en cuenta:

• Imágenes pesadas: Usa formatos WebP o AVIF para reducir el peso.
• Responsive: Aplica max-width:100% y height:auto a la imagen; luego recalcula coordenadas con imageMapResize o ResizeObserver.
• Carga diferida (lazy‑load): Añade loading="lazy" al <img> para mejorar la velocidad de la página.

Ejemplo de uso con ResizeObserver (ES6):

const img = document.querySelector('img[usemap]');
const map = document.getElementById(img.useMap.substring(1));
const originalCoords = Array.from(map.querySelectorAll('area')).map(a => a.dataset.coords);
function scaleCoords() {
  const scaleX = img.offsetWidth / img.naturalWidth;
  const scaleY = img.offsetHeight / img.naturalHeight;
  map.querySelectorAll('area').forEach((area,i) => {
    const coords = originalCoords[i].split(',').map(Number);
    const newCoords = coords.map((c, idx) => idx % 2 === 0 ? Math.round(c * scaleX) : Math.round(c * scaleY));
    area.coords = newCoords.join(',');
  });
}
new ResizeObserver(scaleCoords).observe(img);

Alternativas a los mapas de imagen tradicionales

Resolución de problemas comunes

Conclusión

Los mapas de imagen siguen siendo una herramienta valiosa para crear interfaces visuales ricas sin depender de JavaScript pesado. Con las prácticas recomendadas de accesibilidad, SEO y responsividad, puedes integrar mapas de imagen seguros, escalables y fáciles de mantener. Cuando la complejidad aumenta, considera SVG o Canvas como alternativas.