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/
Laissez une réponse