esempio 4: panoramica del sito senza un solo “click”

[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”.