El Atributo COORDS

Se utiliza en los mapas de área para definir coordenadas de áreas clickeables en una imagen.

El atributo coords se utiliza en la etiqueta <area> (dentro de un <map>) para definir coordenadas de áreas clickeables en una imagen (mapas de imagen). Estas coordenadas determinan la forma y posición de la zona interactiva. A continuación, te explicamos cómo usarlo correctamente.

¿Qué es el atributo `coords`?

Propósito:
Especifica las coordenadas de un área interactiva dentro de una imagen.
Se usa con:
La etiqueta <area> dentro de un <map>.
Formato:
Valores numéricos separados por comas, que varían según el tipo de forma (shape).

Sintaxis Básica

<img src="imagen.jpg" usemap="#mapa">
<map name="mapa">
  <area 
    shape="tipo-de-forma" 
    coords="coordenadas" 
    href="enlace" 
    alt="Descripción"
  >
</map>

Tipos de Formas y Coordenadas

El atributo coords depende del valor de shape. Los formatos son:

`shape="rect"` (Rectángulo)

Coordenadas: x1,y1,x2,y2 (esquina superior izquierda y esquina inferior derecha).

Ejemplo:

<area 
  shape="rect" 
  coords="50,30,200,150" 
  href="pagina.html" 
  alt="Zona rectangular"
>

`shape="circle"` (Círculo)

Coordenadas: centro_x,centro_y,radio.

<area 
  shape="circle" 
  coords="300,200,50" 
  href="enlace.html" 
  alt="Zona circular"
>

`shape="poly"` (Polígono)

Coordenadas: x1,y1,x2,y2,...,xn,yn (puntos consecutivos que forman la figura).

<area 
  shape="poly" 
  coords="400,50,500,150,300,150" 
  href="enlace.html" 
  alt="Zona poligonal"
>

Ejemplo Práctico: Mapa de una Ciudad

Supongamos que tenemos una imagen de un mapa y queremos crear áreas clickeables para diferentes zonas:

<img 
  src="mapa-ciudad.jpg" 
  alt="Mapa de la ciudad" 
  usemap="#mapaciudad"
>
<map name="mapaciudad">
  <!-- Zona centro (rectángulo) -->
  <area 
    shape="rect" 
    coords="100,50,300,250" 
    href="#centro" 
    alt="Centro de la ciudad"
  >
  <!-- Parque (círculo) -->
  <area 
    shape="circle" 
    coords="450,200,80" 
    href="#parque" 
    alt="Parque central"
  >
  <!-- Zona industrial (polígono) -->
  <area 
    shape="poly" 
    coords="500,300,600,350,550,400" 
    href="#industrial" 
    alt="Área industrial"
  >
</map>

Cómo Obtener las Coordenadas

Herramientas en línea:
Usa generadores de mapas de imagen como ImageMap.net.
Editores gráficos:
Abre la imagen en programas como GIMP o Photoshop para medir coordenadas.
Cálculo manual:
Toma como referencia el ancho y alto de la imagen (ej: si la imagen mide 800x600px, coords="400,300" sería el centro).

Errores Comunes

Coordenadas fuera de la imagen:
Si usas valores mayores al tamaño de la imagen, el área no funcionará.
Formato incorrecto:
Usar comas incorrectas o espacios (ej: coords="50 30 200 150" en lugar de coords="50,30,200,150").
Olvidar el atributo shape:
Es obligatorio para definir el tipo de forma.

Mejores Prácticas

Usa alt para accesibilidad:
Describe el propósito del área para lectores de pantalla.
Prueba en múltiples navegadores:
Asegúrate de que las áreas funcionen en Chrome, Firefox, Safari, etc.
Optimiza para móviles:
Los mapas de imagen no son responsivos por defecto. Usa JavaScript o CSS para ajustarlos.

Ejemplo Avanzado: Mapa Interactivo con CSS y JS

Agrega estilos y efectos al pasar el mouse:

<style>
  /* Resalta el área al pasar el mouse */
  area {
    cursor: pointer;
  }
  /* Estilo para la imagen */
  img {
    border: 2px solid #333;
  }
</style>

<script>
  // Muestra un mensaje al hacer clic en un área
  document.querySelector('map').addEventListener('click', (e) => {
    if (e.target.tagName === 'AREA') {
      alert(`Hiciste clic en: ${e.target.alt}`);
    }
  });
</script>

Conclusión

El atributo coords es clave para:

Crear zonas interactivas en imágenes (mapas, infografías, diagramas).
Mejorar la experiencia del usuario con contenido visualmente atractivo.
Implementar navegación intuitiva en proyectos web.

Ejemplo Final:

<!DOCTYPE html>
<html>
<head>
  <title>Mapa de Áreas</title>
</head>
<body>
  <img 
    src="mapa.jpg" 
    alt="Mapa interactivo" 
    usemap="#mapa-interactivo"
  >
  <map name="mapa-interactivo">
    <area 
      shape="rect" 
      coords="20,20,200,150" 
      href="#zona1" 
      alt="Zona 1"
    >
    <area 
      shape="circle" 
      coords="350,100,50" 
      href="#zona2" 
      alt="Zona 2"
    >
  </map>
</body>
</html>

¡Domina el uso de coords para crear mapas de imagen profesionales y funcionales!

¿Qué es el atributo coords?