Rollover immagini con javascript:
Quando parliamo di rollover di immagini con javascript intendiamo una veloce sostituzione di una immagine con un'altra a seguito di un evento scaturito dal mouse.
Un esempio ideale, analizzato in questo articolo, è quello di un pulsante che varia a seconda se il puntatore vi è sopra oppure no.
Per completezza diciamo che quando il puntatore (mouse) è sopra l'oggetto, significa che l'oggetto ha acquisito il fuoco (focus), viceversa quando il puntatore ne esce l'oggetto perde il fuoco.
onMouseOver - onMouseOut
Il codice sorgente è molto semplice, il tutto si basa su due gestori di eventi onMouseOver e onMouseOut.onMouseOver Questo gestore si attiva quando l'oggetto prende il fuoco dal mouse.
onMouseOut Questo gestore si attiva quando l'oggetto perde il fuoco dal mouse.
I due gestori sono complementari per effettuare un rollover. In effetti onMouseOver funziona anche senza l'altro, con l'unico inconveniente che se spostiamo il mouse senza inserire onMouseOut l'immagine non varierà.
ESEMPIO:
Entrambi i gestori:
Se ci passi sopra con il mouse l'immagine varia, quando esci l'immagine torna come prima. |
Solo onMouseOver:
Se ci passi sopra con il mouse l'immagine varia, quando esci l'immagine non varia. |
Codice Rollover:
Il codice per effettuare un rollover è molto semplice. Per iniziare dobbiamo inserire fra i tag <head> e </head> le funzioni per effettuare il rollover e le immagini da alternare.
<head>
...
...
<script type="text/javascript">
<!--
var Img2On = new Image();
Img2On.src = "immagine1.jpg";//immagine1.jpg è l'imagine che vedremo quando l'immagine prende il fuoco
var Img2Off = new Image();
Img2Off.src = "immagine2.jpg";//immagine2.jpg è l'immagine che vedremo quando l'immagine perde il fuoco
function MOver(picimage)//funzione che si attiva con OnMouseOver
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function MOut(picimage)//funzione che si attiva con OnMouseOut
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
-->
</script>
</head>
<body>
...
...
...
...
<script type="text/javascript">
<!--
var Img2On = new Image();
Img2On.src = "immagine1.jpg";//immagine1.jpg è l'imagine che vedremo quando l'immagine prende il fuoco
var Img2Off = new Image();
Img2Off.src = "immagine2.jpg";//immagine2.jpg è l'immagine che vedremo quando l'immagine perde il fuoco
function MOver(picimage)//funzione che si attiva con OnMouseOver
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function MOut(picimage)//funzione che si attiva con OnMouseOut
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
-->
</script>
</head>
<body>
...
...
Adesso dobbiamo inserire il codice sulla riga dell'immagine:
<a href="#" onMouseOver="MOver('Img2')" onMouseOut = "MOut('Img2')">
<img src="immagine2.jpg" border="0" name="Img2">
</a>
In questo caso abbiamo inserito un collegamento alla stessa pagina ("#").
Da notare che dentro il tag <img> abbiamo chiamato l'immagine con il nome "Img2" (name=""), lo stesso che
abbiamo inserito nelle funzioni iniziali.<img src="immagine2.jpg" border="0" name="Img2">
</a>
Appena ci colleghiamo il browser carica l'immagine che trova nel tag img src="", appena passiamo sopra con il mouse l'immagine sarà comandata da javascript e perderà l'immagine iniziale.
Per convenzione l'immagine iniziale è uguale all'immagine comandata da onMouseOut, ma potenzialmente potevamo inserire tre immagini l'una diversa dall'altra.
Più rollover nella stessa pagina:
Per inserire più rollover nella stessa pagina basta inserire quattro righe per ogni immagine nello script iniziale.Capiremo meglio con un esempio (con tre immagini):
<head>
...
...
<script language="JavaScript">
<!--
//prima immagine (nel tag "img" l'attributo name="img2" )
var Img2On = new Image();
Img2On.src = "immagine1.jpg";
var Img2Off = new Image();
Img2Off.src = "immagine2.jpg";
//seconda immagine (nel tag "img" l'attributo name="img3" )
var Img3On = new Image();
Img3On.src = "immagine3.jpg";
var Img3Off = new Image();
Img3Off.src = "immagine4.jpg";
//terza immagine (nel tag "img" l'attributo name="img4" )
var Img4On = new Image();
Img4On.src = "immagine5.jpg";
var Img4Off = new Image();
Img4Off.src = "immagine6.jpg";
//solito script (vedi l'inizio)
function MOver(picimage)//funzione che si attiva con OnMouseOver
...
...
...
...
<script language="JavaScript">
<!--
//prima immagine (nel tag "img" l'attributo name="img2" )
var Img2On = new Image();
Img2On.src = "immagine1.jpg";
var Img2Off = new Image();
Img2Off.src = "immagine2.jpg";
//seconda immagine (nel tag "img" l'attributo name="img3" )
var Img3On = new Image();
Img3On.src = "immagine3.jpg";
var Img3Off = new Image();
Img3Off.src = "immagine4.jpg";
//terza immagine (nel tag "img" l'attributo name="img4" )
var Img4On = new Image();
Img4On.src = "immagine5.jpg";
var Img4Off = new Image();
Img4Off.src = "immagine6.jpg";
//solito script (vedi l'inizio)
function MOver(picimage)//funzione che si attiva con OnMouseOver
...
...
Nel caso di più immagini inserite correttamente i nomi nei tag <img> e nei gestori di eventi che lo precedono.
Suggerimento:
Per avere una corretta esecuzione dello script è buona norma inserire un "precarica immagini" ossia uno script che scarica in memoria del pc utente le immagini prima che la pagina sia visualizzata.Questo accorgimento consente che le immagini siano già a disposizione del pc appena si attiva il rollover.
Pensate cosa potrebbe accadere se ad ogni nuovo rollover dobbiamo scaricare l'immagine ad esso relativa...
Per visualizzare l'articolo corrispondente clicca qui.