searchiniz

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:
  1. 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.

  2. 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.

  3. ALT
    associa un testo di commento all'area selezionata, in maniera del tutto simile all'attributo ALT del tag <IMG>.

  4. HREF
    associa un URL, un indirizzo di una pagina HTML o un programma CGI alla regione in questione.

  5. 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.

Buco nel rettangolo rosso Rettangolo rosso Rettangolo blu Cercho verde Stella viola Sfondo



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.

Stella viola 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

Guida realizzata da   Michele Ferrara  ( © )  




Privacy Policy - Personalizza tracciamento pubblicitario