Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 20 di 30
  • livello principiante
Indice lezioni

esempio 4: panoramica del sito senza un solo "click"

Il contenuto del carrello viene scritto sull'Hard Disk del visitatore che lo avrà disponibile accedendo nuovamente al sito.
Il contenuto del carrello viene scritto sull'Hard Disk del visitatore che lo avrà disponibile accedendo nuovamente al sito.
Link copiato negli appunti

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

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".


Ti consigliamo anche