Manuale di HTML
Tutti i tag
Il tag <AREA>
L'elemento HTML
<AREA>
è usato per specificare ciascuna singola zona attiva dell'immagine.
Un contenitore
<MAP> ...
</MAP> può contenere tanti tag
<AREA> quanti sono necessari. L'effetto di includere qualcos'altro tra
<MAP> e
</MAP> non è completamente definito e dipende da browser e browser.
Il tag
<AREA> ha cinque attributi:
- SHAPE
Definisce la forma dell'area attiva e può assumere quattro possibili valori: rect, circle, poly e default. Se l'attributo non è specificato, allora viene assunto rect come predefinito.
- COORDS
Definisce la zona attiva. Il valore assunto è una serie di numeri separati da una virgola, che indicano le coordinate in pixel (o in percentuale delle dimensioni dell'immagine) dei punti che definiscono l'area.
L'interpretazione dei valori è la seguente:
SHAPE |
numero di valori |
valori |
rect |
4 |
x-sinistra, y-superiore, x-destra, y-inferiore |
circle |
3 |
x-centro, y-centro, raggio |
poly |
n >= 6 |
x1, y1, x2, y2, x3, y3 ... |
Nel caso di un poligono, si assume la chiusura dell'area attiva. Il poligono si considera chiuso da una linea che parte dall'ultima coppia di coordinate alla prima.
Se le regioni si sovrappongono allora il browser prende in considerazione la prima regione che viene definita, come se le altre aree andassero sotto e non fossero raggiungibili dal click del mouse.
- ALT
associa un testo di commento all'area selezionata, in maniera del tutto simile all'attributo ALT del tag <IMG>.
- HREF
associa un URL, un indirizzo di una pagina HTML o un programma CGI alla regione in questione.
- NOHREF
Questo attributo indica che non c'è alcun URL associato con l'area; può essere utilizzato per creare un buco in una regione.
Ecco un esempio di visualizzazione di una mappa immagine. È possibile cliccare su ciascuna area colorata.
E questo è il codice che lo genera
<IMG SRC="area.gif" USEMAP="#map1">
<MAP NAME="map1">
<AREA NOHREF ALT="Buco nel rettangolo rosso" SHAPE="rect" COORDS="34, 8, 200, 40">
<AREA href="mappa1.php" ALT="Rettangolo rosso" SHAPE="rect" COORDS="24, 1, 209, 47">
<AREA href="mappa2.php" ALT="Rettangolo blu" SHAPE="rect" COORDS="1, 54, 50, 199">
<AREA href="mappa3.php" ALT="Cercho verde" SHAPE="circle" COORDS="100, 100, 44">
<AREA href="mappa4.php" ALT="Stella viola" SHAPE="poly" COORDS="175, 92, 191, 128, 229, 120, 202, 150, 215, 186, 182, 168, 155, 197, 161, 156, 126, 140, 164, 131">
<AREA href="mappa5.php" ALT="Sfondo" SHAPE="default">
</MAP>
|
Non c'è bisogno di mettere il tag
<MAP>...
</MAP> immediatamente dopo il tag
<IMG>. L'ancora "map1" serve per legarli insieme, e quindi il tag
<MAP> può stare ovunque nel documento, anche prima del tag
<IMG>.
Nell'esempio possiamo anche vedere come l'attributo
NOHREF sia usato per impostare un buco non cliccabile all'interno del rettangolo rosso. L'area selezionata non viene nemmeno convertita al valore associato all'attributo
shape="default". Se il browser non visualizza il testo contenuto nell'attributo
aLT quando si muove il mouse sulle zone in cui non sono presenti collegamenti, il mouse cambierà forma quando si passa sul buco nel rettancolo rosso.
Nell'esempio sono utilizzate 10 coppie di coordinate per identificare la stella viola, una per ogni vertice del perimetro della stella. È possibile definire la stella anche usando solo 5 coppie di coordinate, come nella figura a destra, ma gli algoritmi utilizzati dalla maggior parte dei browser per determinare l'area cliccabile sono inadatti con questo ordine di punti. Solo Ariadna riesce a identificare correttamente l'area attiva.
Questo è il codice associato alla stella:
<IMG SRC="stellaper.gif" ALIGN="right" HSPACE="5" USEMAP="#map2">
<MAP NAME="map2">
<AREA HREF=mappa4.php" ALT="Stella viola" SHAPE="poly" COORDS="3, 50, 106, 30, 32, 108, 52, 3, 93, 97">
</MAP>
|
Browser
Chrome, Ariadna, Internet Explorer, Netscape Navigator e Opera gestiscono le mappe area in modo corretto. Nessun browser riconosce correttamente l'attributo
ALT. Internet Explorer non riconosce il valore
default per l'attributo
SHAPE.
Vedi anche i tag
<MAP>,
<IMG> e le note generali sulle
mappe attive.
Nel prossimo capitolo descriveremo il tag
<B>.
searchfine