IL CODICE
HTML
Un'immagine regolare
funzionante come un
bottone-link appare in questa
maniera nel codice HTML:
<a href="mypage.htm">
<Img Src="button1a.gif">
</a>
Per rendere possibile a javascript di
cambiare l'immagine, dobbiamo darle
un nome che verrà utilizzato da
javascript come riferimento.
Nel nostro caso, ecco come apparirà
l'HTML
<a href="mypage.htm">
<Img Src="button1a.gif"
name="button1">
</a>
Ora il bottone ha un nome
che sarà usato come
riferimento quando vorremo
che javascript lo sostituisca
con un'altra immagine.
Dobbiamo dire al
browser che dovrà
eseguire una funzione in
grado di sostiutire
l'immagine, quando il
mouse verrà fatto
scorrere sull'immagine.
Questo si ottiene
con l' evento
onmouseOver.
In più dobbiamo anche dire
al browser che quando il
mouse viene fatto scorrere
fuori dall'area del bottone,
entrerà in gioco un altro
javascript per ripristinare
l'immagine iniziale.
Questo si ottiene con
l'evento
onmouseOut.
Il codice completo HTML
sarà dunque:
<a href="mypage.htm"
onmouseOver="MouseOverRouti
ne('button1')"
onmouseOut="MouseOutRoutine
('button1')">
<Img Src="button1a.gif"
name="button1" ></a>
Questo è tutto quello che
c'è da fare per quanto
riguarda la parte HTML
della pagina. Il resto viene
fatto con javascript.
Nota:
Gli eventi-mouse si aggiungono al tag <a href> - NON
al tag image. Questo perché i browser non cercano
eventi di tipo mouseover sulle immagini. Anche se
sembra stupido, è vero. Perciò si possono animare le
immagini soltanto quando queste funzionano come
links. Siccome i browser accettano gli eventi
mouseover soltanto sui link, registreranno un evento
riguardante il mouse su un'immagine, se l'immagine è
un link.
IL CODICE
JAVASCRIPT
Il javascript che segue va inserito
nell sezione "head" della tua pagina
web.
<Script>
<!-// La riga precedente
nasconde il programma ai
// vecchi browser che non
riescono ad intrepretarlo
// Assumendo che l'immagine del
"bottone su" si chiami "button1a.gif"
// E che l'immagine del "bottone giù" si
chiami "button1b.gif"
// Possiamo leggere queste due
immagini come variabili
// chiamate button1up e button1down.
button1up = new Image;
button1up.src = "button1a.gif";
button1down = new Image;
button1down.src = "button1b.gif";
// Ora le due immagini sono definite
// Il passo successivo riguarda
le due funzioni che occorrono.
// La prima funzione si chiama
MouseOverRoutine,
// e fa passare da button1up a
button1down.
function
MouseOverRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src =
button1down.src;}
}
// Ora il nostro bottone passerà da
button1up a button1down
// quando si presenterà un evento
mouseover.
// Per completare il programma
dovremo soltanto
// inserire la funzione inversa, che
farà l'esatto contrario
// quando si presentrerà un evento
mouseout.
function
MouseOutRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src =
button1up.src;}
}
// Tutto qui.
// Il passo finale è la
chiusura della sezione del
programma, che si fa in
due righe:
// La prossima riga fa sì
che i browser di vecchia
data
// ricomincino a
interpretare il codice.
//-->
</script>
riferita al bottone 1 e chiamare
questo button2, button3, in
relazione al numero di bottoni
che vuoi inserire nella pagina.
Se vuoi più di un bottone per
pagina, devi solamente copiare
ogni riga
ESEMPIO