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.
