| ||||||||||||||||
 StaffScripts RollOver Three State su singola pagina | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 22/03/2002 | Downloads: 477 | Voto: 1/5 | Download | P r o v a | ||||||||||||||||||||
|
Rollover Three-State su singola pagina
Un rollover ThreeState è un rollover che oltre allo swap delle immagini, visualizza (e mantiene) una terza immagine quando l'utente clicca sul link. Ovviamente vogliamo anche che l'immagine resti selezionata quando la pagina cambia!
Lo script che segue riprende il RollOver Multiplo pubblicato a fine 1999 (al quale vi rimando per il funzionamento del cambio di immagini) e lo amplia per la gestione della terza immagine al click e cambio pagina. Vale la pena rivedere per intero lo script, in rosso ho evidenziato le righe nuove: <SCRIPT>
<!--
var nome = new Array ("a","b","c")
var source = new Array ();
var sourceoff = new Array ();
var sourceon = new Array ();
var numattivo=null;
for (conta in nome)
{
source[conta] = new Image();
source[conta].src = nome[conta]+".gif";
sourceoff[conta] = new Image();
sourceoff[conta].src = nome[conta]+"_p.gif";
sourceon[conta] = new Image();
sourceon[conta].src = nome[conta]+"_on.gif";
}
function swp(numero)
{
if (numattivo!=numero)
document[String(nome[numero])].src=source[numero].src;
}
function UNswp(numero)
{
if (numattivo!=numero)
document[String(nome[numero])].src=sourceoff[numero].src;
}
function bton(numero)
{
document[String(nome[numero])].src=sourceon[numero].src;
numattivo=numero;
}
function Bottoni()
{
var str=location.search.substr(1).split("&");
for (i in str)
if (str[i].substring(0,10)=="MenuButton")
bton(parseInt(str[i].split("=")[1]));
}
//-->
</SCRIPT>
. . .
<BODY ... onLoad="Bottoni()">
. . .
<A HREF="index.html?MenuButton=0" onClick="bton(0)" onMouseOver="swp(0)" onMouseOut="UNswp(0)"> [...
...] <IMG BORDER="0" SRC="a_p.gif" NAME="a" WIDTH="81" HEIGHT="14"></A>
. . .
NOTA: da questo ho eliminato il controllo sul browser... conto sul fatto che ormai Explorer 3 e browser Mozilla/2 non esistano più :-) Per questo script ci serve, ovviamente, una terza n-upla di immagini, quelle relative al link cliccato che carichiamo nell'array sourceon, e fin qui poco è cambiato dal classico rollover. Le modifiche sostanziali cominciano dal link che dovremo associare alle immagini. Nell'esempio di link che ho inserito poco sopra notiamo che ho aggiunto un terzo event-handler onClick() ed un parametro alla URL della pagina. L'event-handler lancia la funzione bton(numero) che esegue due operazioni: cambia l'immagine cliccata come fa il rollover ed imposta una variabile (numattivo) all'indice dell'array corrispondente al numero dell'immagine/link cliccato. In questo modo le due funzioni del rollover (swp() ed UNswp()) non avranno più effetto su quel bottone, altrimenti al successivo passaggio l'immagine associata al link cambierebbe di nuovo. Tutto questo lavorio comunque è poco visibile, perché contemporaneamente il browser esegue il cambio pagina invocato dal tag <A HREF...>. Quando la pagina viene ricaricata scatta l'event-handler onLoad() che ho inserito nel tag <BODY> (evidenziato in verde) che esegue la funzione bottoni() (in verde anch'essa). La funzione estrae l'insieme dei parametri arrivati nella URL, tronca il "?" iniziale e splitta in un array attorno al carattere "&" (che è il separatore fra i parametri), assegnando le stringhe trovate all'array str. Poi il ciclo for (i in str) spazzola l'intero array fino a che non trova, se c'è, il nostro parametro MenuButton. A questo punto viene invocata la funzione bton() che abbiamo già visto alla quale viene passato come parametro il valore associato a MenuButton, ancora una volta splittando in questo caso l'elemento i dell'array str attorno al carattere di "=" e prendendo il secondo elemento dell'array cos' generato. Il valore viene convertito in intero (parseInt()) e passato alla funzione bton() che rifà i lavoro visto in precedenza e rende di fatto inattiva l'immagine associata al link cliccato. Ovviamente per far funzionare questo rollover sarà necessario inserire in TUTTI i links del nostro sito lo stesso parametro MenuButton opportunamente valorizzato in modo che ogni pagina possa far funzionare bene il rollover. Per chi non avesse dimestichezza con gli array e con il metodo split() in generale, la funzione Bottoni() è equivalente a questa (i commenti si riferiscono alla riga che li precede): function Bottoni()
{
var stringa=location.search.substr(1);
// stringa è letta come ?MenuButton=1 e trasformata in MenuButton=2 da substr()
var str=stringa.split("&");
// split() prende la stringa cui viene applicato e la spezza ogni volta che trova il carattere specificato
(nel nostro caso "&") eliminandolo, ed associando ogni pezzo ad un elemento della variabile dichiarata
("str") che sarà automaticamente un array
for (i in str)
// È una forma abbreviata di for() che effettua un ciclo di indice i in tutti gli elementi dell'array str
if (str[i].substring(0,10)=="MenuButton")
{
// ...se i primi 10 caratteri dell'elemento [i] sono uguali a "MenuButton" ...
var coppia = str[i].split("=");
// Come prima viene generato un array coppia spezzando la stringa in ingresso (semprel'i-esimo elemento di str)
questa volta attorno al carattere "=" e i due elementi trovati ("MenuButton" e il numero)
vengono assegnati all'array coppia.
Così avremo come risultato, ad esempio, var coppia = new Array("MenuButton","1")
numero = parseInt(coppia[1]);
// Il secondo elemento dell'array coppia lo converto in intero e lo assegno a numero...
bton(numero);
// ...poi eseguo la funzione bton() con il parametro numero ricavato dalla stringa dei parametri.
}
} | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
