A volte è necessario far sì che solo una determinata parte di un'immagine
sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una
cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda
un differente link.
In questo caso possiamo utilizzare le mappe.
Ne esistono due tipi:
come valore dell’attributo usemap bisogna specificare il nome della mappa
a cui l'immagine fa riferimento.
Vediamo un esempio: abbiamo preso la cartina dell’Italia e – a scopo puramente didattico
– 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.
In realtà non è difficile disegnare le mappe, perché
ci sono già software che lo fanno al posto nostro.
Se utilizzate un editor visuale (ad esempio Dreamwever MX)
potete trovare degli strumenti integrati nell’ambiente di sviluppo.
che vi consentono di disegnare le mappe in tutta tranquillità.
In alternativa potete utilizzar dei programmi
appositi, come CoffeCup
Image Mapper, CuteMap
o MapEdit
Per quel che riguarda il luogo in cui posizionare la mappa così creata,
dipende dalle vostre preferenze: è una buona norma però situare
la mappa in prossimità dell’immagine, in modo da poterla reperire
facilmente.
Approfondimenti
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()?>
Il metodo viene descritto in una
pillola di PRO.HTML.it (si tratta in realtà di sintassi JavaScript e non di semplice HTML).