Argomenti trattati: il tag <MAP> e la gestione delle mappe cliccabili.
JavaScript consente di gestire, oltre ai link e agli ancoraggi presenti in un documento HTML, anche le mappe cliccabili, ovvero quelle immagini che vengono "suddivise" in sotto-immagini, quindi in porzioni dell'immagine principale, in cui ogni porzione collega ad un altro documento HTML.
Numerosissimi programmi di web-editing, di grafica, o addirittura dedicati, consentono di "mappare" un'immagine in modo automatico, senza alcun intervento da parte di chi costruisce la pagna web.
E' comunque possibile, data un'immagine, creare autonomamente il codice per
ottenere una mappa cliccabile.
Sarà affrontato dapprima questo concetto nel codice HTML.
Questi concetti saranno poi collegati al DOM in JavaScript.
E' abbastanza evidente che qualunque immagine possa essere mappata, come se
altro non fosse che una cartina geografica, ad esempio l'Italia con le sue
regioni.
Un esempio ancora più semplice, può essere il seguente:
Ognuna delle 4 sezioni colorate, porta ad una pagina diversa.
Abbiamo innanzi tutto bisogno di un'immagine, (in questo caso appunto un
rettangolo suddiviso in 4 rettangoli più piccoli).
Il tag HTML sarà dunque il consueto:
<IMG SRC="nome_immgine.estensione" WIDTH="larghezza_in_pixel " (continua sotto)
HEIGHT="altezza_in_pixel" USEMAP="#nome_per_identificare_la_mappa">
I tag <AREA> per creare le sezioni devono essere racchiusi tra i tag:
<MAP NAME="nome_per_identificare_la_mappa"></MAP>
e rappresenteranno le differenti regioni nella mappa.
Gli attributi fondamentali del tag <AREA> sono:
- href: che identifica l'URL verso il quale ci si
collega cliccando sulla
sezione dell'immagine;
-shape: che identifica la forma della sezione (nel
nostro esempio, rettangolare). I valori dell'attributo shape
possono essere: rect (rettangolare o quadrata), circle
(circolare), poly (poligonale);
-coords: identifica le coordinate della sezione
rispetto all'immagine principale. L'angolo superiore sinistro avrà sempre
coordinate (x=0,y=0). Il resto delle coordinate va calcolato, in base agli
strumenti del programma di grafica utilizzato per creare o aprire l'immagine
considerata.
Le coordinate sono così suddivise: rect(x superiore
sinistra, y superiore sinistra, x inferiore destra, y inferiore
destra); circle(x centro, y centro, raggio); poly(x1,y1,x2,y2,x3,y3, ......,xn,yn).
Detto questo, ecco l'HTML completo dell' esempio precedente:
| <img border="0" src="mappa.GIF"
usemap="#MiaMappa" width="230" height="135">
<map name="MiaMappa"> <area href="http://digilander.libero.it/js_passopasso/esempi/pag_r.htm" shape="rect" coords="0, 0, 117, 69"> <area href="http://digilander.libero.it/js_passopasso/esempi/pag_g.htm" shape="rect" coords="117, 0, 229, 69"> <area href="http://digilander.libero.it/js_passopasso/esempi/pag_v.htm" shape="rect" coords="1, 68, 118, 134"> <area href="http://digilander.libero.it/js_passopasso/esempi/pag_c.htm" shape="rect" coords="116, 69, 229, 134"> </map> |
E' possibile gestire le aree della mappa tramite il codice:
document.all.MiaMappa.areas (valido per MSIE)
che corrisponde all'insieme delle regioni della mappa MiaMappa restituite come Array.
Per le aree identificate valgono le proprietà e i metodi JavaScript definiti per l'insieme dei links del documento.
Eventi principali del tag <AREA></AREA> supportati da MSIE: