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.

Articoli simili

1. Menù ad albero in Javascript
2. Come evidenziare i commenti dell’autore
3. [FLMX] scrolling orizzontale di un clip a seconda della posizione del mouse
4. Come creare aree con tooltip su un’immagine
5. Come ordinare le righe di una tabella HTML

Se l'articolo ti è piaciuto è sempre graditissimo un commento! Se vuoi ricevere le ultime novità dal mio blog puoi anche iscriverti ai Feed RSS (non si paga!). Anche via email. CIAO!!