Howtoweb.it

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.

Tag: html, jquery, web design