Map:

Usando i tag html è possibile suddividere una immagine in più settori. Ad ogni settore può essere associato un link cliccabile. Vediamo il codice che dobbiamo usare:
<img src="prova1.jpg" usemap="#prova">



Non dimenticate il cancelletto!!!!
In questo caso richiamiamo l'immagine "prova1.jpg" ma ancora non abbiamo ancora nessun link attivo perché non abbiamo descritto la mappa con nome "prova".
Vediamo il codice per descrivere una mappa all'interno di una immagine:


Questo è il risultato:


Spiegazione:
Per prima cosa dobbiamo creare la mappa con i tag <map> e </map> ed associare un nome per il richiamiamo.

In secondo luogo suddividiamo la mappa con le aree. Per fare questo immaginiamo che il punto più in alto e più a sinistra dell'immagine sia il punto con la coordinata 0,0

Adesso dobbiamo sapere la forma (shape) dell'area:

• shape="rect" Rettangolo. Si trova introducendo due coordinate, una per l'angolo in alto a sinistra, e l'altra per l'angolo in basso a destra (es. coords="0,0,75,57").
• shape="circle" Cerchio. Si trova introducendo una coordinata per il centro ed un numero per il raggio (in pixel) (es. coords="58,62,60").
• shape="poly" poligono. Per poligono intendiamo qualunque figura. Ogni coordinata verrà unita a quella seguente e l'ultima alla prima, un pò come il gioco enigmistico dove dobbiamo unire tutti i puntini numerati... (es. coords="38,124,49,136,40,175,17,178,18,130,26,133,38,124")

nohref il parametro nohref può essere inserito all'interno del tag area quando dopo aver dato la forma e le coordinate dell'area non vogliamo associare nessun link a tale area.
esempio: <area shape="rect" coords="0,0,75,57" nohref>

Utilizzare il tag map per suddividere un'immagine.

Responsabilità
Link amici

W3C validator

W3C validator CSS