Le mappe di immagine

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

<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 vogliamoc reare.

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 alt="Esempio di immagine con mappe" 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 Dreamweaver) potete trovare degli strumenti integrati nell'ambiente di sviluppo che vi consentono di disegnare le mappe in tutta tranquillità.

In alternativa si possono usare 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()?>