Testé et fonctionnel sur
Firefox 3.6+, Chrome 4.5+, Safari 4+, Opera 10.5+, Internet Explorer 6+

Explications

Ce plugin vous permet de personnaliser vos infobulles en les rendant plus sexy !
Rien de nouveau a priori.
Et bien si, puisqu'en plus elles vont vous permettre d'afficher un lien (qui peut posséder lui-même une infobulle, mais pas stylée celle-là) rien qu'en utilisant l'attribut title d'un élément.

Par exemple, la deuxième image de la démonstration possède comme title : "Le chocolat qui vous sourit, aller à la page http://chocolat.net/ pour pouvoir En apprendre plus sur le chocolat".
Tout ce qui se trouve après "aller à la page" sera transformé en lien, et ce qui se trouve après "pour pouvoir" en title de ce lien.
Tout ceci est personnalisable par la suite bien entendu.

Le petit plus est qu'au final, même avec javascript désactivé, ou pour l'indexation de vos pages par les moteurs de recherche, vos title gardent leur place dans le code source, et sans injection de HTML dans le title !

Démonstration

Utilisation

Ce type d'infobulle est très simple à mettre en place puisqu'il s'agit d'un plugin de la bibliothèque jQuery.
Il est aussi très léger (2,13 Ko) et peut même encore être réduit grâce à la compression Gzip (990 octets)

1. Pour commencer téléchargez la bibliothèque jQuery, ou faites un lien depuis l'api Google.
   Placez cet appel du fichier javascript juste avant la balise </body>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
2. Chargez ensuite le plugin de la même manière (n'oubliez pas de le télécharger). Surtout placez-le après la ligne d'appel de la bibliothèque.
   Ici nous imaginons donc que vos scripts se trouvent à la racine de votre site, dans un dossier nommé "scripts".
   A vous de modifier ce chemin si besoin. <script type="text/javascript" src="/scripts/jquery-juizLT.min.js"></script>
   
3. Maintenant il vous faut simplement appeler la fonction en ciblant précisément les éléments de votre page qui seront porteurs de ces infobulles améliorées. Placez ce code à la suite des deux précédentes lignes. (ici les images possédant un titre seront porteuses de ces infobulles)
   <script type="text/javascript"> $(document).ready(function() { $("img[title]").juizTips(); }); </script>

Personnalisation

Ce plugin vous offre un large choix de personnalisation puisqu'il vous sera possible de modifier l'aspect de votre infobulle, mais aussi la vitesse d'animation ainsi que les mots-clefs qui définissent le début d'une URL et celui d'un title

Voici la liste complète des paramètres par défaut :

beforeURL : "aller à la page", 'beforeTitle : "pour pouvoir", // styles 'textSizeTips' : "0.9em", 'lineHeightTips' : "1.2em", 'textColorTips' : "#555", 'tipsWidth' : "auto", 'bgTips' : "#F2F2F2", 'borderTips' : "3px solid #AAA", 'borderRadiusTips' : "8px", 'boxShadowTips' : "2px 2px 9px #999", 'cursorTips' : "help", // animation information 'gotoOpacity' : "0.9", 'gotoTop' : "-17px", 'gotoLeft' : "27px", 'animTime' : "300", 'waitingTime' : "300"

Ces styles se mettent en place automatiquement, dès l'appel de la fonction (étape 3).

Si cela vous fait un peu peur au premier abord, nous en parlons sur le blog, alors n'hésitez pas à aller à la pêche aux info !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction ainsi :

$("img[title]").juizTips({ 'textColorTips' : "black", 'tipsBackground': "white", 'beforeURL': ">>" });

Comme vous pouvez le voir, il suffit de compléter uniquement les styles que vous souhaitez modifier, inutile de reprendre toute la liste précédente.
Ici le texte est devenu noir, le fond blanc, et le marqueur de départ de l'URL est >> (qu'il vous faudra écrire >> dans votre title)

Enjoy !

Téléchargements

Dernière mise à jour le 29 mai 2010