Questo tipo di script si può definire un classico.
È in giro per la rete ormai da anni ma continua a piacere e ad essere utilizzato da tanti redattori HTML, sia hobbisti che professionisti per le tipologie di siti web più disparati.
Ve lo presento in una nuova forma, molto più semplice da usare e capire di quanto ho potuto vedere in giro per il WWW e anche di quelli che ho usato io negli ultimi anni. Il controllo per il browser è il più semplice di tutti quelli che ho visto e l'uso degli
Array per le immagini da cambiare ne consente l'implementazione immediata anche per Explorer 4 (e 5 spero).
Le immagini vengono caricate in due array (insiemi di elementi ordinati e numerati, per dirla semplice) che chiamo rispettivamente
source e
sourceoff: in
source ci sono le immagini che si attivano al passaggio; in
sourceoff ci sono quelle "statiche" cioè quelle visualizzate quando il mouse sta da un'altra parte.
Nel documento HTML all'interno del tag
IMG viene dato all'immagine anche un nome, che nel nostro caso è costituito dalla lettera dell'alfabeto equivalente, cioé secondo la numerazione 0=A 1=B 2=C.... Mi spiego meglio, se nell'array l'immagine "A" è la prima nel documento avrà nome "
A", se la seconda avrà "
B" e cosè via, quindi il mio tag per l'immagine
A all'interno del documento sarà
<IMG SRC="immagine_a.gif" NAME="A">.
Le funzioni che si occupano di cambiare le immagini sono
swp(n) e
UNswp(n) che rispettivamente attivano e disattivano l'immagine.
swp(n) si preoccupa di passare l'immagine
source mentre
UNswp(n) pensa alla
sourceoff.
All'interno del documento HTML per gestire lo scambio vengono usati
OnMouseOver e
OnMouseOut. Così per cambiare l'immagine
E viene usata questa sintassi:
<A HREF="...." onMouseOver="swp(4)" onMouseOut="UNswp(4)"><IMG BORDER="0" SRC="p_e.gif" NAME="E"></A>.
Notate che il numero chiamato nelle funzioni è esattamento lo stesso assegnato all'immagine con
NAME. Questo rende molto comodo e facile anche lo spostamento dell'immagine all'interno del documento o l'inserimento di un'immagine fra due altre. In nessuno dei due casi è necessario rinumerare alcunché. Basta prendere lì'intero tag
<A HREF="..."><IMG SRC="..." NAME=".."></A> e piazzarlo nella nuova posizione.
Allo stesso modo se ho 6 immagini e devo aggiungerne una fra la seconda e la terza, non devo cambiare i numeri di tutte le seguenti, posso tranquillamene dargli il numero 7 ed aggiungere il riferimento al nome anche nel primo array dello script (l'array
nome). È qui infatti che le immagini vengono numerate, nello script riportato più in basso (ed anche in quello che viene usato per la prova) l'immagine "a" è la numero "0", la "b" è la "1" e la "c" è la "2".
Attenzione ci sono in giro altri script che usano il numero per il cambio, ma se li andate a vedere non contengono il
NOME dell'immagine perché le immagini vengono identificate con il numero che gli assegna il browser all'atto del caricamento. Il metodo che vi propongo, invece, è totalmente differente.
Attenzione non preoccupatevi se questo script non va sotto Explorer 3. In effetti MSIE3 non è un vero browser in versione 3, la versione di un browser è data dalla compatibilità con le specifiche Mozilla (v.
CheckBrowser). In realtà MSIE3 è equivalente al Netscape 2(!) e si chiama
3 solo perché è uscito insieme al Netscape 3 che è effettivamente compatibile Mozilla 3. Infatti sotto Netscape 3 questo script funziona.
Vi consiglio d'are un'occhiata al sorgente, vale più di mille parole.
<SCRIPT>
<!--
checkbr = (parseInt(navigator.appVersion) > 2)?true:false;
if (checkbr)
{
nome = new Array ("a","b","c")
source = new Array ();
sourceoff = new Array ();
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";
}
}
function swp(numero)
{
if (checkbr)
{
document[String(nome[numero])].src=source[numero].src;
}
}
function UNswp(numero)
{
if (checkbr)
{
document[String(nome[numero])].src=sourceoff[numero].src;
}
}
function Chiudi()
{
self.close()
}
//-->