mappa di un'immagine di Eliana Argenti e Tommaso Bientinesi

MAPPA DI UN'IMMAGINE

Le pubblicazioni su Internet devono avere un buon impatto visivo. E' utile a tal fine predisporre delle immagini interattive, che permettano cioè di avere risposte diverse a seconda della zona in cui si clicca.

Qui ho preparato un semplice esempio.
Abbiamo sei quadratini che corrispondono ad altrettanti angoli. La linea orizzontale rappresenta la superficie di separazione di due mezzi, la linea verticale la normale alla superficie. Occorre rispondere alla seguente domanda:

Qual è l'angolo di incidenza?
La risposta sarà data cliccando su uno dei sei quadratini. A seconda della risposta data, si riceverà un messaggio diverso.

PROVA SUBITO!

Vediamo ora come si crea una mappa di un'immagine, cioè come si può stabilire una corrispondenza fra alcune aree dell'immagine e i rispettivi collegamenti.

Innanzitutto, il codice relativo alla mappa va inserrito fra i tags

<map name="...."> </map>

Al posto dei puntini si deve inserire il nome della mappa: se ad esempio vogliamo dare alla mappa il nome "miaMappa", scriveremo:

<map name="miaMappa">

Ora si tratta di stabilire quali aree dell'immagine vanno collegate. L'area da collegare può avere diverse forme (shape):

Rettangolare	<area shape="rect" coords="x1,y1,x2,y2" href="..."> Occorre dare le coordinate del vertice in alto a sinistra e di quello in basso a destra del rettangolo.
Circolare	<area shape="circle" coords="xc,yc,raggio" href= "..."> Occorre dare le coordinate del centro e la lunghezza del raggio del cerchio.
Forma libera a contorno poligonale	<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href= "..."> Occorre dare le coordinate del primo vertice fino a quelle dell'ultimo vertice del poligono.

Infine si inserisce l'immagine: è essenziale dichiararne le dimensioni ed esplicitare il fatto che si tratta di un'immagine mappata. Segue il codice di esempio:

<img src="..." width="..." height="..." alt="..." usemap="#miaMappa" ismap>

Come si vede, ogni singola zona della mappa si comporta come un'immagine vera e propria e quindi, possiamo, ad esempio, inserire l'attributo alt="..." per visualizzare una breve spiegazione se di passa con il mouse sopra la zona stessa.

ATTENZIONE: la mappa si basa su coordinate assolute, quindi le dimensioni dichiarate nel tag devono essere assolute e non percentuali, e devono coincidere con quelle reali dell'immagine. Se l'immagine è troppo grande, dovrete rimpicciolirla con un apposito programma.

Come si vede, non è certo difficile costruire una mappa: l'unica difficoltà consiste nel trovare le coordinate dei punti. Queste si possono trovare con l'aiuto di un programma per la gestione delle immagini. L'alternativa è quella di scaricare un programma in Visual Basic che si trova nella sezione utilità di questo sito e che permette di inserire il codice per le mappe in modo semplice e veloce.