Realizzare un rollover sull'immagine con Jquery in meno di un minuto

Realizzare un effetto rollover per le immagini di un sito è un’operazione molto semplice ma diventa complessa quando dobbiamo applicare questo effetto ad un numero elevato (e soprattutto differente) di elementi.

Come prima cosa aggiungiamo un link nella pagina alla libreria di jquery.

<script type="text/javascript" src="javascript/jquery.js"></script>

Iniziamo il nostro codice con $(document).ready che attenderà il caricamento completo della pagina prima di eseguire il codice

$(document).ready(function() {

)};

Al suo interno iniziamo a definire la prima funzione

$("img").each(function() {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
$("<img>").attr("src", rollON);
});

Questa funzione salva il valore dell’attributo src nella variabile rollsrc per ogni immagine presente nella pagina, nella variabile rollON utilizza l’url dell’immagine e aggiunge la stringa “_over”. Nell’immagine dell’esempio cliccami.jpg diventa cliccami_over.jpg. Questa funzione serve per precaricare le immagini prima che siano utilizzate nelle successive funzioni.

$("a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig,"_over.jpg");
$(this).children("img").attr("src", imgsrcON);
}
});

La seconda funzione inizia all’over del mouse sul link, verifica che l’elemento <img> sia figlio dell’elemento <a> e salva in una variabile l’url, verifica se all’interno della variabile esiste la parte “_over” in caso negativo sostiutisce il nome dell’immagine da nomeimmagine.jpg a nomeimmagine_over.jpg. Questo serve per evitare che javascript ripeta l’effetto rollover se il mouse è già sopra l’immagine.

Come ultima funzione definiamo il rispristino dell’url con l’evento mouseout

$("a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});

Sarà sufficiente questa funzione per applicare un’effetto rollover su ogni immagine linkata di una pagina. Basterà fare attenzione a salvare le immagini per l’effetto rollover con con lo stesso nome ed in aggiunta “_over” prima del formato del file.

Per un vedere lo script in azione vedi l’esempio.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

3 risposte a Realizzare un rollover sull'immagine con Jquery in meno di un minuto

  1. Raffaele scrive:

    Molto utile per capire le basi di jquery ma assolutamente sconsigliato nell’atto pratico, tutto l’effetto hover si può riassumere in 3 righe (stato normale, hover e il terzo per nascondere il testo nel link) di css usando i css sprites e con markup semantico dal lato html usando un semplice link con un testo dentro.

    • Mauro Accornero scrive:

      Concordo con te, sicuramente utilizzare questo metodo può essere valido se si aggiunge qualche effetto per le animazioni o gestire effetti differenti (un tooltip per esempio), anche una soluzione ibrida css sprites+jquery non mi sembra la cosa migliore nel caso di un rollover semplice potrebbe però essere utile se si vuole utilizzare un text image replacement.

  2. Alfire scrive:

    per me alcune volte una soluzione “esterna” può tornare molto utile….
    come creare un rollover se una parte di codice che non puoi o conviene modificare direttamente come ad esempio l’estensione di qualche cms…

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>