El Atributo SHAPE

Se utiliza junto con la etiqueta area dentro de un mapa de imágenes map para definir la forma de una zona interactiva en una imagen.

El atributo shape en HTML se utiliza junto con el elemento <area> dentro de un mapa de imágenes (<map>) para definir la forma de una zona interactiva en una imagen. Estas zonas permiten crear enlaces o acciones en áreas específicas de una imagen (como un mapa geográfico interactivo o un diagrama). A continuación, aprenderás cómo implementarlo correctamente.

1. Introducción al atributo shape

  • Propósito:
    Especificar la forma geométrica de una región interactiva dentro de una imagen.

  • Valores admitidos:

    • rect: Rectángulo.

    • circle: Círculo.

    • poly: Polígono (formado por múltiples vértices).

    • default: Toda el área de la imagen no cubierta por otras formas.

  • Contexto:
    Se usa dentro de <area>, que a su vez está dentro de <map>. La imagen asociada se vincula con <img usemap="#nombre-del-mapa">.

2. Sintaxis básica

html
Copy
<img src="imagen.jpg" alt="Descripción" usemap="#mapa-ejemplo">
<map name="mapa-ejemplo">
  <area 
    shape="rect" 
    coords="x1,y1,x2,y2" 
    href="enlace.html" 
    alt="Descripción de la zona"
  >
</map>
 
Run HTML

3. Ejemplos prácticos

Ejemplo 1: Rectángulo (shape="rect")

Define un área rectangular con las coordenadas del vértice superior izquierdo (x1,y1) y el inferior derecho (x2,y2):

html
Copy
<img src="mapa.png" alt="Mapa interactivo" usemap="#mapa1">
<map name="mapa1">
  <area 
    shape="rect" 
    coords="50,50,200,150" 
    href="ciudad-a.html" 
    alt="Ciudad A"
  >
</map>
 
Run HTML

Explicación:

  • coords="50,50,200,150":

    • 50,50: Esquina superior izquierda.

    • 200,150: Esquina inferior derecha.

Ejemplo 2: Círculo (shape="circle")

Define un área circular con las coordenadas del centro (x,y) y el radio (r):

html
Copy
<map name="mapa2">
  <area 
    shape="circle" 
    coords="300,200,50" 
    href="pueblo-b.html" 
    alt="Pueblo B"
  >
</map>
 
Run HTML

Explicación:

  • coords="300,200,50":

    • 300,200: Centro del círculo.

    • 50: Radio en píxeles.

Ejemplo 3: Polígono (shape="poly")

Define un área poligonal con una lista de coordenadas de vértices (x1,y1,x2,y2,...,xn,yn):

html
Copy
<map name="mapa3">
  <area 
    shape="poly" 
    coords="400,50,500,150,450,200" 
    href="region-c.html" 
    alt="Región triangular"
  >
</map>
 
Run HTML

Explicación:

  • coords="400,50,500,150,450,200":

    • Tres vértices formando un triángulo:

      • (400,50), (500,150), (450,200).

Ejemplo 4: Área predeterminada (shape="default")

Define una zona que cubre toda la imagen no ocupada por otras áreas:

html
Copy
<map name="mapa4">
  <area 
    shape="default" 
    href="default.html" 
    alt="Área no especificada"
  >
</map>
 
Run HTML

4. Buenas prácticas

  1. Usar herramientas para generar coordenadas:
    Calcular manualmente las coordenadas es tedioso. Usa editores de imágenes como GIMP o herramientas en línea como Image Map Generator.

  2. Accesibilidad:

    • Siempre incluye el atributo alt en <area> para describir la zona.

    • Evita depender únicamente de mapas de imágenes; considera alternativas como SVG o CSS para diseños responsivos.

  3. Compatibilidad:

    • Los mapas de imágenes funcionan en navegadores modernos, pero pueden no adaptarse bien a pantallas pequeñas.

5. Casos de uso comunes

  • Mapas geográficos interactivos: Resaltar países o regiones.

  • Diagramas técnicos: Enlazar partes de una infografía.

  • Menús visuales: Crear botones en una imagen.

6. Errores comunes

  • Coordenadas incorrectas: Asegúrate de que los valores estén dentro de las dimensiones de la imagen.

  • Olvidar vincular el mapa a la imagen: Usa usemap="#nombre-del-mapa" en <img>.

  • Sobrecargar la imagen: Demasiadas áreas interactivas pueden confundir al usuario.

7. Ejemplo completo

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Mapa interactivo</title>
</head>
<body>
  <img 
    src="world-map.png" 
    alt="Mapa del mundo" 
    usemap="#worldmap"
  >
  <map name="worldmap">
    <!-- América del Norte -->
    <area 
      shape="poly" 
      coords="100,50, 200,80, 180,150, 120,160" 
      href="north-america.html" 
      alt="América del Norte"
    >
    <!-- Europa -->
    <area 
      shape="rect" 
      coords="300,100,400,200" 
      href="europe.html" 
      alt="Europa"
    >
    <!-- Área predeterminada -->
    <area 
      shape="default" 
      href="resto-del-mundo.html" 
      alt="Otras regiones"
    >
  </map>
</body>
</html>
 
Run HTML

8. Conclusión

El atributo shape es útil para:

  • Crear interactividad en imágenes sin necesidad de JavaScript.

  • Definir zonas clicables personalizadas en gráficos complejos.

Limitaciones:

  • No es responsive por defecto (las coordenadas son fijas en píxeles).

  • Alternativas modernas como SVG ofrecen más flexibilidad y escalabilidad.

Recomendación final:
Usa mapas de imágenes para proyectos simples y estáticos. Para diseños responsivos o complejos, considera SVG o frameworks como React + Canvas.

¡Experimenta con este atributo y mejora la interactividad de tus imágenes!