Il modo più semplice per modificare un’immagine all’evento hover è sicuramente quello di utilizzare i css.

Questo comporta però l’utilizzo di un background (per esempio di un contenitore <div>) dunque non è possibile modificare l’attributo SRC di un’immagine solo con i css!

In questo caso specifico ci viene in aiuto jquery con due funzioni (tre se contiamo ready();) che sono hover e attr .

Eccovi il codice sorgente:

[javascript]
<script type="text/javascript">
$(document).ready(function() {
$("#img").hover(
function() {
$(this).attr("src","http://www.domain.tld/img_hover.png");
},function(){
$(this).attr("src","http://www.domain.tld/img.png");
});
});
</script>
[/javascript]

Breve spiegazione:

• Tutto lo script è incluso dentro $(document).ready();. ready()  aspetta il totale caricamento della pagina prima di eseguire il codice contenuto.
• $(“#img”).hover(x,y); questa parte di codice seleziona l’ID ‘img’ nella pagina, mentre dentro hover ci sono due funzioni x e y; x determina l’evento hover, y determina l’evento opposto cioè not-hover.
• $(this).attr(“src”,”immagine.png”); Questa porzione di codice sostituisce il contenuto dell’attributo SRC nel tag IMG.

Alla prossima!