jQuery

Effetto hover jQuery su link : HoverAttribute

 

 

Evento hover

 

Al passaggio del mouse sopra un link (o elemento che contiene un link) é catturabile un evento particolare : hover.

L’effetto hover é spesso sfruttato nelle pagine web per rendere decisamente più accattivante la presentazione di un menu, di una lista di links o di altro. Molteplici sono le possibilità offerte da jQuery per gestire questo effetto, catturabile (al pari di eventi come click, focus ecc) con la semplice sintassi :

 

$(‘#mymenu’).hover(functions() {

$(‘this’).addClass(‘myclass’)

   ……………………

}

Alexander Wallin ha ideato un plugin jQuery davvero interessante e utile sfruttando proprio questo evento. Si chiama hover Attribute e trovate qui la pagina ufficiale. In pratica, il plugin, come é intuibile dall’immagine introduttiva, non fa altro che applicare un effetto particolare ad un link al passaggio del mouse mostrando proprio, al posto dell’anchor text, il relativo URL.

L’utilità del plugin é evidente e, se per default il plugin applica l’effetto a tutti i links con attributo href, logicamente é possibile filtrare e applicare il tutto solo ad alcuni specifici tag :

– $(‘h2 a’).hoverAttribute();  per links contenuti in tag <h2> oppure 

– $(‘h3.myclass a’).hoverAttribute();  per links contenuti solo all’interno del tag <h3> con classe specifica oppure

– $(“a:not(.external)”); per links tranne quelli con classe external ecc

 

Come utilizzare il plugin hoverAttribute

 

Nulla di complicato. Occorre scaricare il plugin e caricarlo all’interno dello spazio web dove risiede il sito o blog. Quindi includere il codice, come al solito, sempre tra i tag head della pagina :

<link rel=”stylesheet” href=”hoverattribute.css” type=”text/css” media=”screen”>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.hoverattribute-1.0.6.js”></script>

<script type=”text/javascript”>
    $(function(){
        $(“h1 a”).hoverAttribute({
            removeWWW: true,
            highlightURLPart: “domain”//”lastURIPart”
                });
    });
</script>

In tal caso, abbiamo indicato che l’effetto hover del plugin sarà applicato a tutti i links (tag <a>) presenti all’interno dell’elemento <h1>.

Quindi, per sfruttare l’effetto creato dal plugin, banalmente il codice html sarà del tipo :

<h1><a href=”http://ilgeek.com/”>Gianni Riccio e il suo Blog</a></h1>

Come é logico, numerose sono le opzioni messe a disposizione dal plugin (animazione, removeProtocol ecc) e trovate sempre nella pagina ufficiale del plugin tutte le informazioni dettagliate.

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Guarda anche

Close