- Learn
- Guida XML-DOM
- esempio 4: panoramica del sito senza un solo “click”
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”.
Se vuoi aggiornamenti su esempio 4: panoramica del sito senza un solo "click" inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Zebra, Android al servizio delle applicazioni industriali
Con Pietro Maggi di Zebra, esaminiamo le potenzialità che nascono montando il sistema operativo Android su dispositivi nati per l’uso […]