Creare una mappa cliccabile con dreamweaver

Oggi vediamo come creare una mappa cliccabile proprio come quella dei siti di annunci con la cartina dell’italia cliccabile, c’è l’avete presente?. Rendere un immagine cliccabile è molto semplice, basta inserire un codice html come questo:

<a href="immagine.html"><img src="immagine.jpg" border="0"></a>

ma appunto se l’immagine è una cartina dell’italia e ogni regione deve essere cliccabile le cose si complicano, per questo motivo sarà necessario creare delle mappe cliccabili grazie a dei tag html.

I principali tag html per far questo sono:

map – crea la mappa con riferimento all’immagine da mappare;
area – crea le aree sensibili al click del mouse;
img – visualizza l’immagine da mappare, con riferimento alla mappa.

Un esempio di codice di una mappa cliccabile è questo:

<map name=”Map”>
<area shape=”poly” coords=”126,158,300,184,293,293,115,268″ href=”#”>
<area shape=”poly” coords=”286,139,196,132,204,50,292,59″ href=”#”>
<area shape=”poly” coords=”277,354,1,303,17,436,250,476″ href=”#”>
<area shape=”poly” coords=”79,299,53,272,52,177,121,85,120,275″ href=”#”>
</map>

Vediamo nel dettaglio a cosa servono questi codici:

La mappa viene contenuta dentro i tag map a cui gli viene associato un nome, all’interno dei tag map potete trovare i tag area che a loro volta contengono gli attributi
href – per il collegamento dei link;
shape – accetta il nome della forma dell’area cliccabile, ovvero:
rect – area quadrata;
circle – area circolare;
polygon – poligono
coords – accetta le coordinate dell’area cliccabile, separate da una virgola.

Al tag img viene associato l’attributo usemap che ha il nome della mappa preceduto da un cancelletto (#). Purtroppo non è semplicissimo capire il meccanismo delle mappe cliccabili ma a questo ci vengno incontro dei software come il gratuito TomaWeb Image Mapper oppure i più conosciuti frontpage o dreamweaver.