La Etiqueta AREA

Define regiones clickeables dentro de un mapa de imagen (usado con y ). Es útil para crear zonas interactivas en imágenes, diagramas o infografías.

La etiqueta <area> define regiones clickeables dentro de un mapa de imagen (usado con <map> y <img>). Es útil para crear zonas interactivas en imágenes, diagramas o infografías.

Sintaxis básica

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

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

Atributos esenciales

Atributo Descripción
shape Forma del área: rect, circle, poly, default (toda la imagen)
coords Coordenadas de la forma (valores separados por comas).
href URL de destino (opcional si es un área no clickeable).
alt Texto alternativo obligatorio para accesibilidad.

Tipos de formas y coordenadas

Rectángulo (rect)

<area shape="rect" coords="x1,y1,x2,y2" href="pagina.html" alt="Zona rectangular"> 

Ejemplo: coords="34,44,270,350"
(Esquina superior izquierda: 34,44; esquina inferior derecha: 270,350). 

Círculo (circle)

<area shape="circle" coords="x,y,radio" href="#" alt="Zona circular">

Ejemplo: coords="100,200,50"
(Centro en 100,200; radio de 50px).

Polígono (poly)

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="#" alt="Zona poligonal">

Ejemplo: coords="20,30,45,90,80,60" (triángulo).

Ejemplo práctico: Mapa interactivo

<img src="planeta-tierra.jpg" alt="Mapa político mundial" usemap="#mapamundi">

<map name="mapamundi">
  <!-- América del Norte (rectángulo) -->
  <area shape="rect" coords="120,80,280,220" href="america-norte.html" alt="América del Norte">
  
  <!-- Europa (polígono) -->
  <area shape="poly" coords="450,150,490,180,470,210,430,190" href="europa.html" alt="Europa">
  
  <!-- Océano Pacífico (círculo) -->
  <area shape="circle" coords="650,300,80" href="oceano-pacifico.html" alt="Océano Pacífico">
</map> 

Accesibilidad

  • exto alt descriptivo: Obligatorio para lectores de pantalla.

  • Evitar dependencia exclusiva de coordenadas: Proporciona enlaces alternativos en texto.

  • Navegación por teclado: Usa tabindex si es necesario:
<area ... tabindex="0" aria-label="Descripción extendida">

Estilización y retroalimentación visual

Las áreas no son visibles por defecto. Usa CSS + JavaScript para resaltarlas:

<style>
  .area-highlight {
    opacity: 0.3;
    background-color: #3498db;
  }
</style>

<script>
  document.querySelectorAll('area').forEach(area => {
    area.addEventListener('mouseover', (e) => {
      const coords = e.target.coords.split(',');
      // Lógica para crear un overlay con las coordenadas
    });
  });
</script> 

Errores comunes

Coordenadas incorrectas:

<!-- Error: Coordenadas fuera de la imagen -->
<area shape="rect" coords="1000,2000,1200,2200" ...>

Falta de vinculación entre <img> y <map>:

<!-- Error: name en <map> no coincide con usemap -->
<map name="mapa1">
<img usemap="#mapa2">

Usar para elementos complejos:

  • Prefiere SVG para formas detalladas.

Comparación: <area> vs SVG

Característica <area> SVG
Precisión Limitada a formas básicas Formas complejas y trazados
Accesibilidad Requiere gestión manual Elementos semánticos integrados
Animaciones No soportadas Soporte nativo
Compatibilidad Universal Buena (excepto IE8-)

Buenas prácticas

Herramientas para generar coordenadas:

Optimiza para móviles:

img[usemap] {
  max-width: 100%;
  height: auto;
}

Alternativa para dispositivos táctiles:

  • Considera deshabilitar mapas de imagen en móviles si la experiencia no es óptima.

Ejemplo avanzado: Menú interactivo

 <img 
  src="menu-infantil.png" 
  alt="Menú interactivo para niños" 
  usemap="#menu-juegos"
>

<map name="menu-juegos">
  <area 
    shape="circle" 
    coords="85,120,60" 
    href="rompecabezas.html" 
    alt="Juego de rompecabezas"
    data-tooltip="¡Armemos un rompecabezas!"
  >
  <area 
    shape="poly" 
    coords="250,80, 300,150, 200,150" 
    href="memoria.html" 
    alt="Juego de memoria"
    data-tooltip="Entrena tu memoria"
  >
</map>

Conclusión:

La etiqueta <area> es una herramienta poderosa para crear interactividad en imágenes, pero debe usarse con precisión. Combínala con JavaScript para experiencias dinámicas y siempre prioriza la accesibilidad. ¡Experimenta responsablemente!

 

Aquí tienes un tutorial sobre el uso de la etiqueta <area> en un documento HTML.

Tutorial: Uso de la etiqueta <area> en HTML

La etiqueta <area> se utiliza para definir áreas sensibles en un mapa de imágenes, que son enlaces a otras páginas o secciones dentro de la misma página. Se utiliza junto con la etiqueta <map>, que define el mapa de imagen.

Paso 1: Crear una imagen de fondo

Primero, necesitas una imagen que actuará como el fondo del mapa. Asegúrate de que la imagen esté en un formato compatible (JPG, PNG, GIF, etc.) y que tenga áreas que deseas convertir en enlaces.

<img src="imagen-ejemplo.jpg" usemap="#miMapa" alt="Descripción de la imagen" />

Paso 2: Crear un mapa de imagen con <map>

A continuación, crea un mapa de imagen utilizando la etiqueta <map> , y define las áreas específicas de la imagen utilizando la etiqueta <area> . Aquí hay un ejemplo básico:

<map name="miMapa">
    <area shape="rect" coords="34,44,270,350" href="pagina1.html" alt="Página 1" />
    <area shape="circle" coords="337,300,44" href="pagina2.html" alt="Página 2" />
    <area shape="poly" coords="200,10,250,30,300,50,180,75" href="pagina3.html" alt="Página 3" />
</map>

Desglose de atributos

shape: Especifica la forma del área sensible. Puede ser:

  • rect : Un rectángulo.
  • circle : Un círculo.
  • poly : Un polígono.

coords: Define las coordenadas del área dependiendo de la forma:

  • Para rect (esquinas superior izquierda e inferior derecha):
    • xmin
    • ymin
    • xmax
    • ymax
  • Para circle (coordenadas del centro y radio):
    • x
    • y
    • r
  • Para poly (pares de coordenadas para los vértices):
    • x1
    • y1
    • x2
    • y2
    • xn
    • yn

href: La URL a la que se enlaza el área. Puede ser una página externa o un enlace dentro del mismo sitio.

alt: Texto alternativo que describe el área; es importante para la accesibilidad.

Paso 3: Ejemplo completo

Aquí tienes un ejemplo completo que combina los pasos anteriores:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Mapa de Imagen</title>
</head>
<body>
    <h1>Mapa de Imagen Ejemplo</h1>
    <img src="imagen-ejemplo.jpg" usemap="#miMapa" alt="Descripción de la imagen" />

    <map name="miMapa">
        <area shape="rect" coords="34,44,270,350" href="pagina1.html" alt="Página 1" />
        <area shape="circle" coords="337,300,44" href="pagina2.html" alt="Página 2" />
        <area shape="poly" coords="200,10,250,30,300,50,180,75" href="pagina3.html" alt="Página 3" />
    </map>
</body>
</html>

Consideraciones finales

  • Asegúrate de que las coordenadas sean correctas para que las áreas sensibles correspondan adecuadamente a las secciones de la imagen.
  • Usa un texto alternativo significativo en el atributo alt para mejorar la accesibilidad del sitio.
  • Siempre verifica que los enlaces funcionen correctamente.