[Un unico file Sitemap.htm e le tre immagini p1/2/3, da salvare nella stessa cartella]
Molti siti di buona qualità mettono a disposizione dell'utente, sulla homepage, una "sitemap", che riassume per titoli l'organizzazione dei contenuti. Queste mappe sono di solito degli alberi espandibili, con brevi testi.
E se la mappa anziché testi contenesse immagini, che al passaggio del mouse potessero espandersi in forme fantasiose come spirali o stelle? Un elenco di titoli si trasformerebbe in un percorso sensibile al mouse, che senza un solo click condurrebbe il visitatore attraverso una vera "anteprima visiva" del sito.
tramite XML + DOM questi percorsi possono essere creati, a partire da una serie di immagini predisposte ed un algoritmo che ne gestisce l'apertura. Vediamo come questi due elementi interagiscono nell'esempio 4:
Aree mappabili
Le immagini che devono formare il percorso vengono distribuite nella pagina dove dovranno apparire. Ad ognuna viene assegnata un'area mappabile sensibile al passaggio del mouse:
<img name="p1" src="p1.jpg" usemap="#a1" width="70" height="70">
...
<map name="a1">
<area coords="0,0,70,70" onMouseOver="pass('p1')">
</map>
Le dimensioni coords="0,0,x,y" devono permettere di coprire tutta l'immagine correlata.
Nell'esempio le immagini sono state disposte in righe e colonne di una tabella solo per ridurre la parte html a favore della visibilità dello script. Volendo potete disporre le immagini ovunque vogliate: l'unico limite è che formino un cammino continuo per lo spostamento del mouse.
Algoritmo di gestione dell'apertura delle immagini.
All'inizio le immagini devono essere dichiarate tutte di dimensione nulla a parte l'iniziale (si badi di aggiungere border="0", altrimenti al posto delle immagini vi saranno dei punti non proprio invisibili):
<img name="p11" border="0" src="p1.jpg"
usemap="#a11" width="0" height="0">
La variabile stringa, che registra lo stato di apertura delle finestre, ha il seguente contenuto iniziale:
<control on="true">
<p1 on="true">
<p11 on="false">
<p111 on="false</p131>
...
</p132>
</p13>
</p1>
</control>
Ogni volta che un'immagine aperta viene attraversata dal mouse l'algoritmo nella funzione pass() legge lo stato registrato nella stringa XML e prende una decisione:
- se le immagini "figlie" sono chiuse il passaggio del mouse ne genera l'apertura:
if (img == "p112")
{
document.p112.width = x;
document.p112.height = y
}
- se le immagini "figlie" sono già aperte si possono scegliere due alternative: o chiuderle (cammino "a ritroso") o lasciarle aperte, riservando la chiusura ad un tasto "reset" o al passaggio sull'immagine iniziale.
Il nuovo stato viene registrato nella variabile XML e l'algoritmo procede.
Nell'esempio abbiamo scelto l'alternativa del cammino a ritroso. Si noti che l'algoritmo deve essere studiato accuratamente: ad esempio all'apertura di un nuovo figlio il "nonno" viene "fissato", per evitare che comandi la chiusura dell'immagine intermedia, lasciando isolati i "nipoti".
