Page 54 - Guida tascabile HTML5

La sintassi prevede in primo luogo l’utilizzo dell’attributo usemap nel tag <img>,

con cui viene inserita nel documento l’immagine di riferimento: tale attributo
conterrà, preceduto dal simbolo cancelletto #, il nome della mappa in questione. Il

tag <map> riprenderà poi tale valore nell’attributo name, creando un riferimento

univoco utilizzato nella pagina.

All’interno di <map>, ogni tag <area> descrive un’area. Alcuni attributi specifici

permettono di definire il tipo di figura (shape) e i valori numerici che ne
identificano il perimetro (coords).

L’attributo shape="circle" identifica un’area rotonda. I tre valori numerici

indicati in coords sono nell’ordine la posizione orizzontale x e quella verticale

y del centro del cerchio, seguite dal raggio: coords="x,y,raggio".
L’attributo shape="rect" identifica un’area rettangolare. I quattro valori

numerici indicati in coords sono, in sequenza, le coordinate x e y dell’angolo

superiore sinistro del rettangolo, seguite dalle coordinate x e y dell’angolo

inferiore destro: coords="x1,y1,x2,y2".

L’attributo shape="poly" identifica un’area poligonale. Le coppie di valori x e

y in coords identificano in sequenza i vertici dell’area:
coords="x1,y1,x2,y2,...,xn,yn". Per esempio un triangolo (quasi) equilatero al

centro di un’immagine di 500x500 pixel sarà identificato da una sintassi di

questo tipo: coords="250,141,125,358,375,358".

ATTENZIONE Il sistema di coordinate, in pixel, prende come riferimento l’angolo in

alto a sinistra dell’immagine, che sarà il punto 0,0.
Con l’attributo href viene indicato l’URL a cui l’utente sarà rimandato facendo

clic all’interno dell’area definita (nel Capitolo 5, più precisamente nel paragrafo

dedicato al tag <a>, troverete un approfondimento sull’attributo href). Infine, per

questioni legate all’accessibilità delle informazioni, è necessario specificare anche
l’attributo alt che completa la descrizione del collegamento ipertestuale href.

TERMINOLOGIA La sintassi del tag <area>, come quella di altri tag già descritti, non
prevede un corrispondente tag di chiusura.

Tenete presente che le aree così descritte non sono visibili e non alterano

l’immagine di riferimento: reagiscono solo ai clic del mouse.

NOTA Qualora due aree risultassero sovrapposte, la priorità sarà attribuita a quella
definita prima nel codice HTML.