Attributo coords di HTML
L'attributo HTML coords specifica le coordinate di un'area nella mappa immagine. Scopri questa proprietà con un esempio sul tag <area>.
L'attributo HTML coords definisce le coordinate di un'area cliccabile (un "hotspot") in una mappa immagine lato client. Viene utilizzato sull'elemento <area>, all'interno di un elemento <map>.
Il valore di coords non ha senso da solo — viene sempre interpretato in base all'attributo shape dello stesso elemento <area>. Gli stessi numeri hanno significati diversi per un rettangolo, un cerchio o un poligono, quindi coords e shape devono essere impostati sempre insieme.
Come funziona il sistema di coordinate
Le coordinate sono misurate in pixel CSS, relative all'immagine renderizzata:
- L'origine
0,0corrisponde all'angolo in alto a sinistra dell'immagine. xaumenta verso destra,yaumenta verso il basso.- L'angolo in basso a destra dell'immagine si trova a
width,height— quindi per un'immagine 250×150 la coordinata valida più grande è circa250,150.
Poiché le coordinate sono legate alle dimensioni renderizzate, una mappa immagine è precisa solo alla dimensione per cui le coordinate sono state misurate. Se si ridimensiona l'immagine con CSS (un width/height diverso, un layout responsive o lo zoom), gli hotspot non coincidono più con l'immagine. Le mappe immagine funzionano quindi meglio su immagini a dimensione fissa.
Valori
Il formato di coords dipende interamente dall'attributo shape:
Valore di shape | Formato di coords | Significato |
|---|---|---|
rect | x1,y1,x2,y2 | Angolo in alto a sinistra (x1, y1) e angolo in basso a destra (x2, y2). È necessario che x1 < x2 e y1 < y2. |
circle | x,y,radius | Centro (x, y) e il radius in pixel. |
poly | x1,y1,x2,y2,...,xn,yn | Un elenco di vertici. Il browser chiude automaticamente la forma collegando l'ultimo punto al primo. |
default | (nessuno) | L'intera immagine. default è un valore di shape, non di coords — un elemento <area shape="default"> non richiede coords. |
Un errore comune è fornire a rect i suoi angoli nell'ordine sbagliato. coords="90,90,35,55" non è valido perché x1 > x2 e y1 > y2; scritto correttamente quel rettangolo è coords="35,55,90,90".
Sintassi
<area shape="rect" coords="x1,y1,x2,y2">Esempi dell'attributo coords di HTML
L'esempio seguente utilizza un'area rect, due aree circle e un'area poly sulla stessa immagine:
<!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: Fornisci sempre a ogni elemento
<area>un valorealtsignificativo — è l'unico testo che un lettore di schermo ha per quell'hotspot.
Una nota sull'accessibilità
Le mappe immagine lato client sono una tecnica legacy e presentano limitazioni concrete. Gli hotspot non sono sempre raggiungibili in modo affidabile tramite tastiera, il loro significato dipende da un alt preciso per ogni elemento <area>, e le coordinate si rompono ogni volta che l'immagine viene ridimensionata o renderizzata a una scala diversa. Per la maggior parte delle interfacce moderne è preferibile disporre link o pulsanti singolarmente stilizzati e focalizzabili sopra (o accanto) all'immagine, che rimangono accessibili e responsive. Ricorri a coords e alle mappe immagine solo quando hai effettivamente bisogno di regioni cliccabili irregolari su una singola immagine raster a dimensione fissa.
Attributi e tag correlati
<map>— definisce la mappa immagine che raggruppa gli elementi<area>.<area>— l'elemento su cui si impostacoords.- Attributo
alt— il testo accessibile per ogni area.