.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Ancora una volta uno script molto semplice e di facile utilizzo.
      Questo script consente di realizzare un semplice rollover per livelli analogamente a quelli che già conosciamo, ma realizzati con delle immagini.
      Naturalmente il vantaggio nell'usare dei livelli al posto delle immagini sta prima di tutto nella diminuzione del "peso" finale della pagina web in termini di Kbytes da scaricare, ed ovviamente nella maggiore facilità di gestione, sia per la modifica dei testi che per l'aggiunta di nuovi, dato che sarà sufficiente aggiungere il nuovo livello e gli event-handler nei link.
      L'esempio che descriverò nelle prossime righe è pensato per essere compreso agevolmente da chi non ha mai usato i livelli, così da costituire anche un piccolo tutorial introduttivo al DHTML.

      Ecco il sorgente della pagina di esempio:

<HTML>
<HEAD>
<TITLE>http://www.jsdir.com - Rollover per livelli</TITLE>
<Script>
var N4 = document.layers?true:false;
var DOM2 = document.getElementById?true:false;
var RollerLayer = new Array();
var LastLiv = null;

function Inizia()
   {
   for (i=0 ; i<4 ; i++)
      RollerLayer[i]=N4?document.layers["roller"+i]:DOM2?document.getElementById("roller"+i).style:document.all["roller"+i].style;
   }

function ShowLayer(n)
   {
   RollerLayer[n].visibility="visible";
   LastLiv=n;
   }

function HideLayer()
   {
   RollerLayer[LastLiv].visibility = "hidden";
   }
onload=Inizia;
</Script>
</HEAD>
<STYLE TYPE = "text/css">
.livelli {
   position:absolute; 
   left:200; 
   top:10; 
   visibility:hidden; 
   background-color:#ffff00; 
   layer-background-color:#ffff00; 
   font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size : 8pt; 
   font-style : normal; 
   background : Teal; 
   color : Yellow; 
   }

</STYLE>
<BODY BGCOLOR="#FFFFFF">
<DIV ID="roller0" CLASS="livelli"> Livello di help (tooltip) per il link n. 1 </DIV>
<DIV ID="roller1" CLASS="livelli"> Livello di help (tooltip) per il link n. 2 </DIV>
<DIV ID="roller2" CLASS="livelli"> Livello di help (tooltip) per il link n. 3 </DIV>
<DIV ID="roller3" CLASS="livelli"> Livello di help (tooltip) per il link n. 4 </DIV>
<A href="agenda.html" onMouseOver="ShowLayer(0)" onMouseOut="HideLayer()"> Link n. 1 </A> <BR> 
<A href="minutes.html" onMouseOver="ShowLayer(1)" onMouseOut="HideLayer()"> Link n. 2 </A> <BR> 
<A href="enc101.html" onMouseOver="ShowLayer(2)" onMouseOut="HideLayer()"> Link n. 2 </A> <BR> 
<A href="enc102.html" onMouseOver="ShowLayer(3)" onMouseOut="HideLayer()"> Link n. 4 </A> <BR> 
</BODY>
</HTML>

      Iniziamo la descrizione dello script dalla parte HTML.
      Nel <BODY> sono compresi sia i livelli da visualizzare (in verde) che i links.
      La sintassi dei links è equivalente a quella che avrete già visto per un rollover di immagini: al tag <A HREF...> sono associati due event-handler: onMouseOver ed onMouseOut che eseguono delle funzioni JavaScript quando il mouse si posiziona sul link e quando lo lascia. Al MouseOver è associata la funzione ShowLayer(X) che, la vedremo fra poco, visualizzerà il livello "X" che abbiamo associato al link, mentre al MouseOut è associata la funzione HideLayer() che invece nasconde il livello appena visualizzato.
      Immediatamente sopra troviamo, evidenziati in verde, i livelli che, a parte il testo contenuto, hanno delle caratteristiche comuni: l'ID e lo stile (CLASS).
      L'ID è nel formato "rollerX" dove ad "X" sostituirete lo sesso numero associato dal link alla funzione ShowLayer(X). In pratica il numero "X" costituirà il legame fra il link ed il livello relativo che verrà visualizzato. Attenzione che mentre non possono coesistere due livelli con lo stesso valore di "X" possono tranquillamente essere associati più link allo stesso livello.
      L'altro parametro dei livelli (CLASS) è invece collegato allo stile (in grigio) che definisce le caratteristiche dei livelli per quanto riguarda posizine ed aspetto grafico. Per semplificare l'esempio ho usato lo stesso stile per tutti i livelli che così si posizionano allo stesso posto ed hanno gli stessi colori, ovviamente possono essere definiti ed associati tutti gli stili che ritenete necessari.

      Veniamo allo script (in rosso) che si compone di appena una quindicina di righe di codice.
      Le prime tre righe sono tre dichiarazioni di variabili, N4 e DOM2 servono semplicemente per identificare il browser in cui sta girando lo script. La funzione seguente (Inizia()) identificherà i livelli con una sintassi differente a seconda che lo script stia girando in Netscape 4 (N4 sarà "true"), in IE5 e successivi e Netscape6/Mozilla (DOM2 sarà "true") oppure in IE4 (non definita perché sarà la sintassi eseguita se le altre due variabili saranno contemporaneamente "false").
      Noterete che Opera non è stato identificato perché secondo le sue impostazion si identificherà ed eseguirà il codice relativo al browser emulato nelle preferenze del programma. Ciò non toglie che comunque anche Opera eseguirà senza problemi lo script.
      La variabile successiva (RollerLayer) è un array ai cui elementi verranno associati i vari livelli, mentre LastLiv (che essendo dichiarata in questo punto dello script sarà una variabile globale) servirà per tener traccia del livello visualizzato.
      Passiamo alla funzione.
      Inizia() viene eseguita al caricamento della pagina lanciata dall'istruzione onload=Inizia; alla fine dello script. L'uso di questa istruzione ci evita di modificare il <BODY> come abbiamo visto altre volte.
      Il ciclo di Inizia() serve ad associare agli elementi dell'array i vari livelli. Se aggiungete o togliete livelli dovrete modificare il numero 4 che vedete nel ciclo: premesso che comunque la numerazione dei livelli (rollerX) deve cominciare da zero, al posto del numero 4 metterete il numero esatto di livelli inseriti nel documento.
      Il codice eseguito dal ciclo è equivalente a questo:

if (N4)
   RollerLayer[i] = document.layers["roller"+i];
else
   if (DOM2)
      RollerLayer[i] = document.getElementById("roller"+i).style;
   else
      RollerLayer[i] = document.all("roller"+i).style;

      chi già ha letto alcune delle mie schede, già saprà che preferisco usare ?: piuttosto che if {} else {} per semplificare il codice e ridurne le linee, pur se ad un primo impatto può sembrare una strana sintassi, una volta fattaci l'abitudine diventa una cosa molto comoda e naturale.
      La visibilità dei livelli (che avrete notato nello stile è preimpostata ad "hidden") viene gestita dalla proprietà "visibility" che nel caso di Netscape4 si applica direttamente al livello, mentre negli altri casi si applica alla proprietà "style".
      Associare una volta per tutte all'i-esimo elemento dell'array il livello correttamente identificato ci risparmierà, nelle due successive funzioni, di dover eseguire in continuazione il controllo del browser per usare la giusta sintassi.
      Veniamo alle due ultime funzioni:
      ShowLayer(n) riceve dai tag il numero del livello da mostrare e lo memorizza nella variabile "n". Successivamente applica al livello (identificato dall'elemento RollerLayer[n] dell'array) la proprietà "visibility" con il valore visible.
      Quel che succede è semplice: supponendo di aver posizionato il mouse sul secondo link dall'alto, viene passato alla funzione il valore 1 la funzione prende il livello di indice 1 (il secondo perché la numerazione degli elementi di un array inizia da 0) e lo rende visibile.
      Tutto finisce qui, ora abbiamo il livello a video; la seconda e ultima operazione che fa ShowLayer() è memorizzare in LastLiv il valore ricevuto con n.
      Quando il mouse lascia il link, viene eseguita la funzione successiva HideLayer().
      A questa funzione non è necessario passare parametri: infatti fa lo stesso identico lavoro dell'altra, ma questa volta imposta la visibilità del livello a "hidden" quindi lo nasconde. E lavora sul livello "LastLiv" in cui è contenuto il livello che fino a quel momento era visualizzato.
      Naturalmente non è necessario cancellare la variabile LastLiv perché sarà nuovamente valorizzata da ShowLayer() al prossimo passaggio del mouse un un altro link.

      Questo è tutto.
      Per chi avesse studiato la sintassi di Netscape4 noterà una differenza: nella documentazione i valori per la visibilità ed invisibilità dei livelli sono definiti come "show" ed "hide", ma "visible" ed "hidden" hanno lo stesso effetto e ci consentono di snellire il codice da un altro eventuale if {} else {}.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!