|
A volte è necessario far sì che solo una determinata parte di un'immagine sia collegata a un link. In questo caso possiamo utilizzare le mappe.
Ne esistono due tipi:
Questo tipo di mappa è contraddistinto dall’attributo usemap del Tag img:
| <img src = "miaImmagine.gif" usemap = "nomeMappa"> |
come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento. A questo punto non ci resta che creare la mappa:
| <map name = "nomeMappa"> ... </map> |
All’interno del Tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il Tag <area>, per ogni zona sensibile che vogliamo creare.
Vediamo un esempio: abbiamo preso la cartina dell’Italia ed abbiamo deciso di mappare la Regione Valle D’Aosta con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un poligono ( per rendervene conto passate il mouse su una di queste regioni ).
|
|
|
<img src = "italia.gif" width="220" height="235" border="1" usemap = "#regioni" > <map name = "regioni" id = "regioni" > <area shape = "rect" coords = "14,24,35,37" href = "http://www.regione.vda.it/" target = "_blank" alt = "Valle d'Aosta" > <area shape = "circle" coords = "45,156,29" href = "http://www.regione.sardegna.it/" Target = "_blank" alt = "Sardegna" > <area shape = "poly" coords = "105, 199, 115, 197, 121, 200, 131, 201, 139, 198, 150, 197, 156, 195, 151, 201, 145, 209, 148, 212, 150, 219, 152, 225, 147, 227, 144, 231, 128, 221, 119, 219, 113, 212, 108, 212, 102, 210, 98, 205" href = "http://www.regione.sicilia.it/" target = "_blank" alt = "Sicilia" > </map> |
Le coordinate fanno riferimento all’immagine stessa, e il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0. Le coordinate dei punti che descrivono le varie forme si riferiscono alla distanza in pixel da quel punto ( si tratterà di volta in volta della x o della y ).
Come si può vedere per definire un’area è necessario specificare una forma, che può essere di tre tipi:
| Forma | Descrizione |
| rettangolare <area shape = "rect" > |
è necessario specificare alcune coordinate del rettangolo per individuare i veritici. In particolare sono da specificare ( in quest’ordine ):
|
| circolare <area shape ="circle" > |
è necessario specificare le coordinate del centro (x e y) e la misura del raggio (in pixel) |
| poligonali <area shape = "poly" > |
è necessario specificare tutte le coordinate del poligono a coppie |
In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo ( ed eventualmente il longdesc ).
Per il resto, il tag <area > si comporta esattamente come il tag <A>, con la possibilità di specificare ad esempio il target in cui aprire i link.
Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi:
| onFocus = 'this.blur()' |
da applicare al tag <AREA> in questo modo:
| <area shape = "circle" coords = "45,156,29" href = "http://www.regione.sardegna.it/" target = "_blank" alt = "Sardegna" onFocus = 'this.blur()' > |