Cambiare una immagine al passaggio del mouse

E possibile far cambiare "al volo" una immagine in una pagina usando un paio di semplici istruzioni Javascript, utilizzando gli eventi "onMouseOver" ed "onMouseOut". Le immagini - al fine di ottenere un buon effetto - dovranno essere della stessa grandezza e possibilmente piuttosto piccole (dal punto di vista dimensioni del file).

Cominciamo con l'inserire una immagine - quella che dovrà essere normalmente sempre visibile, (in questo caso la "1"), e diamole una identità (per comodità)

A questo punto inseriamo gli handler per gli eventi onMouseOver e onMouseOut: il primo farà si che qualcosa accada quando il mouse ci passa sopra, il secondo invece compirà una diversa azione quando il puntatore del mouse lascerà la zona.

In questo caso "onMouseOver" cambia la proprietà "src" dell'immagine (la sorgente, ovvero l'URL) puntando ad una diversa GIF, mentre "onMouseOut" ripristina il valore precedente.

Naturalmente non è necessario che gli eventi siano legati all'immagine che cambia: lo stesso effetto può essere generato per mezzo di un testo o di una diversa immagine oppure oggetto. In tal caso gli eventi vanno inseriti sull'elemento "scatenante", mantenendo però l'effetto sull'immagine di prima.

Per immagini piu corpose è consigliabile effettuare un pre-caricamento in background di quella che dovrà apparire in seguito, ma lo scopo di questa pagina è di indicare il come... sarà facile trovare scripts piu raffinati in rete.