Rollover per immagini con JavaScript
Come realizzare con JavaScript il cambio delle immagini al passaggio del mouse
In questo post si parla di un’operazione oramai molto diffusa nelle pagine web: l’alternanza di immagini legate al passaggio del puntatore del mouse di esse, ovvero di rollover, in questo caso realizzato con javascript.
Un classico esempio è un pulsante che cambia colore al passaggio del mouse.
Il meccanismo è basato sull’identificazione del focus (cioè il riconoscimento della selezione di un oggetto) dell’immagine in questione: focus attivo quando il puntatore entra sull’immagine, focus non attivo quando il puntatore esce dall’immagine. Queste condizioni sono identificate dagli eventi onMouseOver e onMouseOut.
onMouseOver si attiva quando il mouse entra sull’oggetto
onMouseOut si attiva quando il mouse esce dall’oggetto
Il codice Rollover
Il codice per ottenere l’effetto rollover viene inserito fra i tag <head> e </head> della pagina in questione ed effettua il precaricamento delle immagini necessarie.
<head>
<script type=”text/javascript”>
<!—
var img1On = new Image();
img1On.src = “immagineattiva.jpg”;//immagineattiva.jpg è l’imagine che viene visualizzata al passaggio del mouse
var img1Off = new Image();
img1Off.src = “immaginedisattiva.jpg”;//immaginedisattiva.jpg è l’immagine che viene visualizzata all’uscita del mouse
function MOver(image)//funzione OnMouseOver
{
picture_On = eval(image +”On.src”)
document[image].src = picture_On
}
function MOut(image)//funzione OnMouseOut
{
picture_Off = eval(image +”Off.src”)
document[image].src = picture_Off
}
—>
</script>
</head>
Per realizzare il pulsante sensibile al passaggio del mouse, dobbiamo inserire il codice che visualizza l’immagine e che richiama la funzione
<a href=”#” onMouseOver=”MOver(‘img1’)” onMouseOut = “MOut(‘img1’)”>
<img src=”immaginedisattiva.jpg” border=”0″ name=”img1″>
</a>
Il riferimento alla stessa pagina (href=”#”) si rende necessario dato che la pagina è sempre quella, ma visualizzerà un risultato leggermente diverso.
Pingback: Mikis' Bookmarks