Attributo coords <area> HTML

Etichetta HTML <area>

Definizione e uso

Attributo coords Definisce le coordinate dell'area nella mappatura dell'immagine.

Attributo coords Attributo con Attributo shape Utilizzati insieme per specificare la dimensione, la forma e la posizione dell'area.

Suggerimento:Le coordinate dell'angolo superiore sinistro dell'area sono 0,0.

Attenzione:Se le coordinate di un tag area si sovrappongono a quelle di altre aree, viene dato la precedenza al tag area apparso prima. Il browser ignora le coordinate al di fuori dei limiti dell'immagine.

Esempio

Usare l'attributo coords per definire le coordinate di ogni area nella mappatura dell'immagine:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Prova a fare tu stesso

Sintassi

<area coords="value">

Valore dell'attributo

Valore Descrizione
x1,y1,x2,y2 Stabilire le coordinate dell'angolo superiore sinistro e dell'angolo inferiore destro del rettangolo (shape="rect").
x,y,radius Stabilire le coordinate del centro e il raggio (shape="circle").
x1,y1,x2,y2,...,xn,yn

Stabilire le coordinate degli spigoli del poligono.

Se la prima e l'ultima coppia di coordinate non sono le stesse, il browser aggiungerà l'ultima coppia di coordinate per chiudere il poligono (shape="poly").

Spiegazione dettagliata:

L'attributo coords del tag <area> definisce le coordinate delle aree sensibili al mouse nella mappatura dell'immagine client. Il significato dei numeri delle coordinate e il loro significato dipendono dalla forma dell'area decisa dall'attributo shape.

Di seguito sono elencati i valori appropriati per ogni forma:

Circonferenza: shape="circle", coords="x,y,z"

Qui x e y definiscono la posizione del centro della circonferenza ("0,0" rappresenta le coordinate dell'angolo superiore sinistro dell'immagine), r è il raggio circolare in pixel.

Poligono: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Ogni coppia di coordinate "x,y" definisce un vertice del poligono ("0,0" rappresenta le coordinate dell'angolo superiore sinistro dell'immagine). Per definire un triangolo sono necessarie almeno tre coppie di coordinate; per un poligono ad alta latitudine sono necessari un numero maggiore di vertici.

Il poligono viene chiuso automaticamente, quindi non è necessario ripetere la prima coordinate alla fine della lista per chiudere l'intera area.

Rettangolo: shape="rectangle", coords="x1,y1,x2,y2"

Il primo coordinate sono le coordinate dell'angolo di un rettangolo, mentre l'altra coppia di coordinate sono le coordinate dell'angolo opposto, "0,0" sono le coordinate dell'angolo in alto a sinistra dell'immagine. Si prega di notare che definire un rettangolo è un metodo semplificato per definire un poligono con quattro vertici.

Ad esempio, il seguente frammento di XHTML in un'immagine di 100x100 pixel nella parte inferiore destra del quarto inferiore definisce un'area sensibile al mouse e un'area circolare al centro dell'immagine.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Etichetta HTML <area>