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.

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

Back to top button