Creare pulsanti con rollover

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.

su WordPress…

Dopo una prima breve ricerca, ho trovato un plugin per creare un effetto rollover in WordPresssu un’immagine: Hover-Image plugin.

Basta caricare ed attivare il plugin. Fatto questo, quando siamo nell’editor basta usare due “hosrtcode” o tag speciali:

[himage]<a href="..."><img src="foto.jpg" /></a> <img src="hover.jpg" />[/himage]

Come vedete:

  • all’esterno ci sono i tag speciali
  • all’interno ci sono due immagini: la prima normale, la seconda per il rollover
  • e la prima immagine ha anche il link.

C’è da dire che purtroppo questo sistema non funziona su Internet Explorer!

Io per ora ho risolto questo usando i commenti condizionali e un plugin che mi permette di inserire codice html puro in WordPress.

Javascript…

Altrimenti si può anche fare a mano, usando javascript:

<a href="...">
<img src="out.gif"
onmouseover="this.src='in.gif';"
onmouseout="this.src='out.gif';" >
</a>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.