Linkin Tips

À quoi sert-il ?

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à), en partant de l'attribut title d'un élément.

Voir la démonstration

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 dans les paramètres du plugin.

L'important est qu'au final, même avec javascript désactivé vos titres gardent un sens !

Utilisation

Ce type d'outil 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 (1,2 ko) et peut même encore être réduit grâce à la compression Gzip à environ 0,52 ko.

  1. Chargez le fichier des styles du plugin. Ce code d'appel au fichier CSS doit être placé avant la balise </head> :
    <link href="css/juizLinkinTips.css" rel="stylesheet"
    type="text/css" media="screen, projection" />
    Ces styles sont personnalisables, bien entendu.
  2. 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>
  3. Chargez le fichier du plugin de la même manière en le plaçant après la ligne d'appel de la bibliothèque.
    Ici nous imaginons 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/juizLinkinTips.min.js">
    </script>
  4. Appelez la fonction en ciblant précisément les éléments de votre page qui seront porteurs de ces infobulles.
    Placez ce code à la suite des deux précédentes lignes :
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("img[title]").juizLinkinTips();
    	});
    </script>
    Ici les images possédant un titre seront porteuses de ces infobulles.

Personnalisation

Vous pouvez personnaliser votre infobulle grâce aux styles (CSS), mais aussi grâce aux paramètres suivants dont voici les valeurs par défaut :

Nom Description Valeur / "Défaut"
beforeURL Le marqueur de l'URL à venir Chaînes de caractères
"aller à la page"
beforeTitle Le marqueur du title du lien. Chaînes de caractères
"pour pouvoir"
gotoOpacity Opacité à la fin de l'animation Un nombre entre 0 et 1 (ex: 0.75)
"0.9"
gotoTop Position à la fin de l'animation Valeur en pixels
"-17px"
gotoLeft Position à la fin de l'animation Valeur en pixels
"27px"
duration Durée de l'animation Un nombre (millisecondes)
"300"
tipsDelay Délais avant disparition de l'infobulle Un nombre (millisecondes)
"300"

Si vous le souhaitez nous en parlons sur le blog, alors n'hésitez pas à poser vos questions !

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

$("img[title]").juizLinkinTips({
	'duration' 	: "200",
	'beforeURL'		: ">>"
});

Ici la durée d'animation a été raccourcie et le marqueur de départ de l'URL est >> (qu'il vous faudra écrire &gt;&gt; dans votre title)

* jQ.CreativeJuiz.fr *