|
Home -> Manuali e Tutorials -> Guida HTML -> Mappe di immagini
Scarica Guida HTML  | Stampa Tutorial HTML  | Cerca nel sito 
Mappare una immagine in HTML
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:
- le mappe lato client
- le mappe lato server (non più utilizzate)
Le mappe lato-client
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 ):
- la x del lato di sinistra
- la y del lato alto
- la x del lato destro
- la y del lato in basso
|
| 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:
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()' > |
Torna su  | Indice Guida  | Pagina << 17 >>
|
