http://blog.DoZarte.com

Creare un effetto rollover su immagini, che magari stiamo usando come pulsanti nelle nostre pagine web, diventa molto semplice usando il framework Jquery.

Come al solito, richiamiamo Jquery, dopodichè all’interno del solito ‘richiamo’…

$(document).ready(function(){
    ...
});

…inseriamo un codice come questo:

$("img[@src*=bottoneOut.gif]").mouseover(function(){
    $(this).attr({ src: "BottoneOver.gif" });
});

Per chiarezza:
il codice ha effetto su l’immagine che nel suo SRC (source, sorgente) contiene ‘bottoneOut.gif’ (ma potevamo scrivere anche solo ‘bottone’, ‘Out’, ‘gif’, …) e al momento in cui il mouse le passa sopra entra in azione, modificando l’attributo SRC in modo da richiamare un’altra immagine.

Alla stessa maniera funziona il codice per ripristinare la situazione iniziale:

$("img[@src*=bottoneOut.gif]").mouseout(function(){
    $(this).attr({ src: "bottoneOut.gif" });
});

Se qualcuno ha qualche consiglio per semplificare questo codice, è il benvenuto.