La Etiqueta MAP

Define un mapa de imagen que asocia áreas clickeables en una imagen con enlaces o acciones.

La etiqueta <map> define un mapa de imagen que asocia áreas clickeables en una imagen con enlaces o acciones. Funciona junto con:

  • <img>: La imagen base (usando el atributo usemap).

  • <area>: Define las regiones clickeables dentro del mapa.

Sintaxis básica

<img src="imagen.jpg" alt="Descripción" usemap="#nombre-mapa">

<map name="nombre-mapa">
  <area shape="forma" coords="coordenadas" href="enlace" alt="Descripción">
  <!-- Más áreas -->
</map>

Paso a paso

Preparar la imagen

Usa una imagen en formato JPG, PNG o SVG. Ejemplo:

<img src="planeta-tierra.jpg" alt="Mapa del planeta Tierra" usemap="#mapaTierra">

Crear el <map> con <area>

Define las áreas clickeables usando coordenadas. Tipos de formas (shape):

  • rect: Rectángulo (coordenadas: x1,y1,x2,y2).

  • circle: Círculo (coordenadas: centro-x,centro-y,radio).

  • poly: Polígono (coordenadas: x1,y1,x2,y2,...,xn,yn).

Ejemplo:

<map name="mapaTierra">
  <!-- Área rectangular (América del Norte) -->
  <area shape="rect" coords="100,50,300,200" href="america-norte.html" alt="América del Norte">
  
  <!-- Área circular (Europa) -->
  <area shape="circle" coords="400,150,50" href="europa.html" alt="Europa">
  
  <!-- Área poligonal (Asia) -->
  <area shape="poly" coords="500,80,600,120,550,200" href="asia.html" alt="Asia">
</map>

Cómo obtener las coordenadas

  1. Herramientas en línea:
    Usa generadores de mapas como ImageMap.net o plugins para editores gráficos (Photoshop, GIMP).

  2. Cálculo manual:

    • Abre la imagen en un editor y anota las coordenadas (ej: (x=100, y=50)).

    • El punto (0,0) es la esquina superior izquierda.

Ejemplo visual

Supongamos que tenemos esta imagen:
Mapa simple

<img src="mapa.png" alt="Mapa interactivo" usemap="#mapaEjemplo">

<map name="mapaEjemplo">
  <!-- Zona 1 (Rectángulo verde) -->
  <area shape="rect" coords="50,50,200,150" href="zona1.html" alt="Zona Verde" title="Zona Verde">
  
  <!-- Zona 2 (Círculo azul) -->
  <area shape="circle" coords="350,100,40" href="zona2.html" alt="Zona Azul" title="Zona Azul">
  
  <!-- Zona 3 (Triángulo rojo) -->
  <area shape="poly" coords="500,50,600,50,550,150" href="zona3.html" alt="Zona Roja" title="Zona Roja">
</map>

Mejorar la experiencia de usuario

Estilos CSS con hover:
Usa JavaScript o la pseudoclase :hover para resaltar áreas (requiere agregar IDs a las áreas):

area:hover {
  cursor: pointer;
}

Tooltips con title:
Agrega el atributo title a <area> para mostrar un mensaje al pasar el mouse:

<area ... title="Haz clic para ver detalles">

Errores comunes

  1. Coordenadas incorrectas:
    Asegúrate de que las coordenadas no excedan las dimensiones de la imagen.

  2. Olvidar el name en <map> o usemap en <img>:
    El nombre del mapa en <map name="..."> debe coincidir con #nombre en usemap.

  3. Ignorar la accesibilidad:
    Siempre incluye el atributo alt en <area>.

Mejores prácticas

  1. Prueba las coordenadas:
    Usa validadores de mapas o herramientas como MapChecker.

  2. Optimiza para móviles:
    Los mapas de imágenes no son responsivos por defecto. Usa bibliotecas como ImageMapster o reemplázalos con SVG en diseños modernos.

  3. Usa SVG como alternativa:
    Para mapas complejos y responsivos, considera usar SVG con <a> o <rect>.

Ejemplo avanzado: Mapa con hover

<img src="mapa.png" alt="Mapa interactivo" usemap="#mapaEjemplo" id="imagenMapa">

<map name="mapaEjemplo">
  <area shape="rect" coords="50,50,200,150" href="#" alt="Zona 1" 
    onmouseover="resaltarZona('zona1')" onmouseout="quitarResaltado()">
</map>

<script>
  function resaltarZona(zona) {
    document.getElementById('imagenMapa').style.border = "3px solid red";
  }
  function quitarResaltado() {
    document.getElementById('imagenMapa').style.border = "none";
  }
</script>

Casos de uso reales

  • Mapas geográficos interactivos (países, regiones).

  • Diagramas técnicos (partes de una máquina).

  • Menús visuales (restaurantes, tiendas en línea).

Con este tutorial, podrás crear mapas de imágenes funcionales y accesibles. Aunque es una tecnología clásica, sigue siendo útil en contextos específicos. ¡Experimenta y combínala con CSS/JS para mejores resultados! ????