Atributo coords de HTML
El atributo coords de HTML define las coordenadas de un área clicable en un mapa de imagen. Conoce esta propiedad y ve un ejemplo en el elemento <area>.
El atributo coords de HTML define las coordenadas de un área clicable (un "hotspot") en un mapa de imagen del lado del cliente. Se utiliza en el elemento <area>, dentro de un <map>.
El valor de coords carece de sentido por sí solo: siempre se interpreta según el atributo shape del mismo <area>. Los mismos números significan cosas distintas para un rectángulo, un círculo o un polígono, por lo que coords y shape deben establecerse siempre juntos.
Cómo funciona el sistema de coordenadas
Las coordenadas se miden en píxeles CSS, relativas a la imagen renderizada:
- El origen
0,0es la esquina superior izquierda de la imagen. xaumenta hacia la derecha,yaumenta hacia abajo.- La esquina inferior derecha de la imagen está en
width,height— así, para una imagen de 250×150, la coordenada válida más grande es aproximadamente250,150.
Dado que las coordenadas están vinculadas al tamaño renderizado, un mapa de imagen solo es preciso al tamaño para el que se midieron las coordenadas. Si escalas la imagen con CSS (un width/height diferente, un diseño responsivo o zoom), los hotspots dejan de coincidir con la imagen. Por eso los mapas de imagen funcionan mejor en imágenes de tamaño fijo.
Valores
El formato de coords depende enteramente del shape:
Valor de shape | Formato de coords | Significado |
|---|---|---|
rect | x1,y1,x2,y2 | Esquina superior izquierda (x1, y1) y esquina inferior derecha (x2, y2). Debe cumplirse x1 < x2 e y1 < y2. |
circle | x,y,radius | Centro (x, y) y el radius en píxeles. |
poly | x1,y1,x2,y2,...,xn,yn | Una lista de puntos de esquina. El navegador cierra automáticamente la forma uniendo el último punto con el primero. |
default | (ninguno) | Toda la imagen. default es un valor de shape, no de coords — un <area shape="default"> no lleva coords. |
Un error frecuente es indicar las esquinas de rect en orden incorrecto. coords="90,90,35,55" no es válido porque x1 > x2 e y1 > y2; escrito correctamente, ese rectángulo es coords="35,55,90,90".
Sintaxis
<area shape="rect" coords="x1,y1,x2,y2">Ejemplos del atributo coords de HTML
El ejemplo siguiente usa una zona rect, dos zonas circle y una zona poly sobre la misma imagen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<!-- circle: center x,y and radius -->
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="195,32,28" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<!-- rect: top-left x1,y1 then bottom-right x2,y2 (x1<x2, y1<y2) -->
<area shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
<!-- poly: a triangle joining three points -->
<area shape="poly" coords="150,80,230,80,190,140" alt="js" href="https://www.w3docs.com/" />
</map>
</body>
</html>Nota: Asigna siempre a cada
<area>un valoraltsignificativo — es el único texto que un lector de pantalla tiene disponible para ese hotspot.
Una nota sobre accesibilidad
Los mapas de imagen del lado del cliente son una técnica heredada y presentan inconvenientes reales. Los hotspots no siempre son accesibles de forma fiable mediante el teclado, su significado depende de un alt preciso en cada <area>, y las coordenadas se rompen cada vez que la imagen se redimensiona o se renderiza a una escala diferente. Para la mayoría de las interfaces modernas es preferible colocar enlaces o botones individuales con estilo propio y enfocables sobre (o junto a) la imagen, que permanecen accesibles y responsivos. Recurre a coords y a los mapas de imagen solo cuando genuinamente necesites regiones clicables irregulares sobre una imagen rasterizada de tamaño fijo.
Atributos y etiquetas relacionados
<map>— define el mapa de imagen que agrupa los elementos<area>.<area>— el elemento sobre el que se establececoords.- Atributo
alt— el texto accesible para cada área.