Web-tutoriel

Plugin jquery pour afficher l’URL d’un lien au survol – HoverAttribute jQuery Plugin 7 mai , 2010

Le plugin HoverAttribute permet d’afficher l’URL du lien quand on passe la souris dessus.

En voici un exemple : Le site des tutoriels Linux Debian

Le code de l’exemple est le suivant :
(dans cet exemple, je lui assigne un id pour le retrouver facilement) :

<a id="lien_xenetis" href="http://www.xenetis.org" target="_blank">Le site des tutoriels Linux Debian</a>

Et on ajoute la ligne javascript suivante :

$("#lien_xenetis").hoverAttribute();

Sans oublier d’inclure vos librairies jquery :

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/jquery.hoverattribute-1.0.6.js" type="text/javascript"><!--mce:1--></script>

Il est aussi possible de ne pas afficher le protocole ( http:// ou ftp:// ) :
Le blog du réseau XENETIS
Avec les paramètres suivants :

$("#lien_xenetis2").hoverAttribute({
   removeProtocol: true
});

Ou encore d’afficher le titre du lien avec une transition à l’affichage :
Photos de voyages

$("#lien_pdv").hoverAttribute({
   attribute: "title",
   tweenInFrom: "bottom",
});

Voici différentes autres options que supporte le plugin :

$(".selector").hoverAttribute({
   attribute: "href",
   animationTime: 0.3,
   animationEase: "linear",
   tweenInFrom: "left",
   parseAsURL: null,
   removeProtocol: true,
   removeWWW: false,
   wrapLink: "after",
   wrapLength: 60,
   highlightURLPart: "host",
   cssSettings: {
      canExpandFullWidth: true
   }
});

Vous pouvez le télécharger sur le site de jquery : http://plugins.jquery.com/project/hoverattribute
D’autres exemple à cette adresse : http://www.afekenholm.se/hoverattribute-jquery-plugin/