El Atributo USEMAP

El atributo usemap permite convertir áreas específicas de una imagen en enlaces interactivos, creando un mapa de imagen del lado del cliente. Es útil para definir regiones "clicables" en gráficos complejos, como diagramas, mapas geográficos o infografías. A continuación, te explicamos cómo usarlo paso a paso.

1. ¿Qué es un Mapa de Imagen?

Un mapa de imagen vincula áreas de una imagen (rectángulos, círculos, polígonos) a enlaces o acciones.

• Elementos clave:

  • <img>: La imagen base.

  • <map>: Contiene las definiciones de las áreas interactivas.

  • <area>: Define la forma, coordenadas y enlace de cada zona.

2. Sintaxis del Atributo usemap

1. Asignar el mapa a la imagen:
   Usa usemap="#nombre-del-mapa" en la etiqueta <img> para vincularla al <map>.

   html

   Copy

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

    

• Run HTML

• Crear el mapa:
  Define un <map> con el atributo name que coincida con el valor de usemap.

  html

  Copy

  <map name="mapa-ejemplo">
    <!-- Áreas interactivas aquí -->
  </map>

   

2. Run HTML

3. Definir áreas con <area>:
   Cada <area> especifica:

   • shape: Forma geométrica (rect, circle, poly, default).

   • coords: Coordenadas de la forma (en píxeles).

   • href: Enlace al que dirige el área.

   • alt: Texto alternativo para accesibilidad.

3. Ejemplo Práctico: Mapa de un Sistema Solar

Supongamos que tenemos una imagen de un sistema solar y queremos que los planetas sean enlaces.

<img 
  src="sistema-solar.jpg" 
  alt="Sistema Solar" 
  usemap="#mapa-sistema-solar"
>

<map name="mapa-sistema-solar">
  <!-- Sol (círculo) -->
  <area 
    shape="circle" 
    coords="150,150,50"  <!-- Centro (x,y), radio -->
    href="sol.html" 
    alt="Información del Sol"
  >

  <!-- Tierra (rectángulo) -->
  <area 
    shape="rect" 
    coords="300,200,350,250"  <!-- Esquina superior izquierda (x1,y1), esquina inferior derecha (x2,y2) -->
    href="tierra.html" 
    alt="Información de la Tierra"
  >

  <!-- Marte (polígono) -->
  <area 
    shape="poly" 
    coords="400,300, 420,320, 410,340"  <!-- Lista de puntos (x1,y1, x2,y2, ...) -->
    href="marte.html" 
    alt="Información de Marte"
  >
</map>

4. Tipos de Formas (shape) y Coordenadas

5. Herramientas para Generar Coordenadas

Calcular coordenadas manualmente es tedioso. Usa herramientas como:

• Editores de imágenes: GIMP, Photoshop (muestran coordenadas al pasar el cursor).

• Generadores en línea: Image Map Generator.

6. Buenas Prácticas

1. Accesibilidad:

   • Usa el atributo alt en cada <area> para describir la zona.

   • Proporciona un enlace alternativo para usuarios que no puedan interactuar con el mapa.

2. Responsive Design:
   Los mapas de imagen no escalan automáticamente. Si tu sitio es responsive, considera usar CSS o SVG.

3. Pruebas:
   Verifica que los enlaces funcionen y las áreas coincidan con la imagen.

7. Casos de Uso Comunes

• Mapas geográficos interactivos: Países, estados, o puntos de interés.

• Diagramas técnicos: Partes de una máquina vinculadas a manuales.

• Menús visuales: Botones en una imagen de fondo.

8. Ejemplo Avanzado: Mapa de un Continente

<img 
  src="sudamerica.jpg" 
  alt="Mapa de Sudamérica" 
  usemap="#mapa-sudamerica"
>

<map name="mapa-sudamerica">
  <!-- Argentina (polígono) -->
  <area 
    shape="poly" 
    coords="100,200, 120,220, 110,240, 90,230" 
    href="argentina.html" 
    alt="Argentina"
  >

  <!-- Brasil (rectángulo) -->
  <area 
    shape="rect" 
    coords="200,150, 300,250" 
    href="brasil.html" 
    alt="Brasil"
  >
</map>

9. Errores Comunes

• Olvidar el # en usemap:

  html

  Copy

  <!-- ❌ Incorrecto -->
  <img usemap="mapa-ejemplo">
  
  <!-- ✅ Correcto -->
  <img usemap="#mapa-ejemplo">

   

• Run HTML

• Coordenadas incorrectas: Asegúrate de que coincidan con la imagen.

• Ignorar la accesibilidad: No omitas alt en las áreas.

10. Conclusión

El atributo usemap es ideal para:

• Crear interactividad en imágenes sin JavaScript.

• Mejorar la experiencia del usuario en contenido visual.

¡Recuerda!

• Usa herramientas para generar coordenadas.

• Prioriza la accesibilidad y el diseño responsive.

• Prueba en múltiples navegadores y dispositivos.

Con este tutorial, podrás implementar mapas de imagen efectivos y accesibles en tus proyectos web. ????????️