 |  | |||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||
Nei precedenti progetti avete inserito delle immagini nelle pagine Web utilizzando il tag <IMG>. Avete anche creato un collegamento mediante un'immagine utilizzando il tag ancora <A>. Se impostate questo collegamento, il visitatore della pagina Web viene connesso a un altra pagina quando fa clic sull'immagine. Quando un collegamento un collegamento è incorporato come parte di un'immagine, l'immagine intera diventa l'area sensibile. Nel caso di una mappa immagine, l'immagine intera non deve corrispondere all'area sensibile, ma esiste un'area specifica o diverse aree sensibili al clic del mouse. Le mappe immagine sono utilizzate per la navigazione. Con esse è possibile creare collegamenti multipli da un'unica immagine, suddivisa in diverse aree sensibili. Quando attiva un'area sensibile, il visitatore viene connesso a un'altra parte della stessa pagina Web o ad una pagina diversa, nello stesso sito, o in un altro, a seconda dell'area sensibile attivata.
Ecco un esempio di mappa immagine:
Aprite la barra dei pulsanti nel programma di grafica in uso. Se non avete ancora creato una barra dei pulsanti, come prima operazione createla, in modo da avere qualcosa con cui lavorare. Decidete in quali aree della barra dovranno essere presenti i link e annotate queste aree su un foglio di carta. Quindi annotate le coordinate per ogni area collegata. Il programma di grafica vi deve mostrare le coordinate del puntatore del mouse, una funzione che normalmente si trova in una determinata posizione della finestra del programma. Questo è fondamentale perché vi occorrono coordinate precise. Spostate il puntatore del mouse nell'angolo in alto a sinistra dell'immagine. La lettura delle coordinate dovrebbe essere 0,0 (o simile). Decidete quali aree della barra dei pulsanti (l'immagine che avete creato) desiderate siano collegate e annotatele con le rispettive coordinate. Spostate il puntatore del mouse dall'angolo superiore sinistro all'angolo inferiore destro della stessa area e annotate queste coordinate. Le coordinate dell'immagine mappata sono basate esclusivamente sulle posizioni superiore sinstra e inferiore destra, e 0,0 è l'angolo superiore sinistro dell'immagine della barra.
Ripetete il passo per tutte le aree dell'immagine che devono essere collegate. Le dimensioni delle aree devono essere espresse sempre in pixel. Le dimensioni della prima area nell'esempio sono: da 0,0 a 118,32. Ora aprite il file HTML che conterrà la barra dei pulsanti. Dovrete inserire il codice per far comparire la barra dei pulsanti, che non è altro che un tag <IMG>. Dunque scrivete:
<IMG SRC="nome_immagine.gif" border=0 USEMAP="#barra">
Naturalmente al posto di nome_immagine.gif sostituite il reale nome del file immagine che avete creato. Il tag USEMAP serve a denominare la barra dei pulsanti, prima del nome è fondamentale inserire il cancelletto (#). Apparirà l'immagine come se fosse una qualsiasi. Ora nella sezione <HEAD> inserite il tag MAP:
<MAP NAME="barra">
</MAP>
Per ciascuna area che deve essere collegata dovreste aggiungere una riga come questa tra i tag <MAP> e </MAP>:
<AREA TYPE=RECT COORDS="0,0,118,32" HREF="index.htm">
Ovviamente dovete sostituire le coordinate corrette e HREF dovrebbe puntare alla pagina che comparirà dopo aver fatto clic su quell'area dell'immagine. Notate che le sono inserite come quattro numeri separati dalla virgola (,). Il tag <MAP> ultimato per la barra dei pulsanti di esempio è illustrato sotto.
<MAP NAME="barra">
<area type="rect" coords="0,0,118,32" href="destra.htm" title="home">
<area type="rect" coords="0,33,118,65" href="diegochat.htm" title="chat">
<area type="rect" coords="0,66,118,99" href="sms.htm" title="sms">
<area type="rect" coords="0,100,118,132" href="roms.htm" title="roms">
<area type="rect" coords="0,133,118,166" href="html.htm" title="html">
</MAP>