Télécharger Démo

Présentation

Cette petite application donne un peu de dynamisme à votre site grâce aux infobulles accolées sur les liens. Cet effet, issu du thème Modern, a été adapté de telle sorte à être plus fluide et, surtout, fonctionnel sur un large panel de navigateurs.

Fonctionnement

Pour utiliser ce script, vous allez avoir besoin de JQuery dans sa dernière version. Ensuite, il faudra rajouter le code suivant dans vos pages web :

<script src="jquery.js" type="text/javascript"></script>
<script src="glincer.js" type="text/javascript"></script>

Dans la partie entête ou corps de votre document, il faudra créer un "objet" Glincer et effectuer des appels à la méthode addToGlincer (qui sera décrire dans la section documentation).

<script type="text/javascript">
$(document).ready(function() {
        var GlincerLoader = new Glincer();
        GlincerLoader.addToGlincer('a',{},'glincer');
});
</script>

Documentation

addToGlincer

Description : Ajoute des liens dans Glincer.

• 1. Le sélecteur des liens (correspond à un sélecteur JQuery).
• 2. Les conditions d'affichage (voir plus bas).
• 3. Le nom de la classe CSS à utiliser.

Conditions d'affichage

Description : ensemble de conditions autorisant ou non la création d'une infobulle Glincer.

Paramètre link : Crée une restriction sur le type des liens à afficher.

• external : Afficher des infobulles Ginger sous tous les liens contenant http://.
• internal : Afficher des infobulles Ginger sous tous les liens locaux.
• both : Afficher des infobulles sous tous les liens.

Paramètre title : Pose une restriction sur les liens suivant le contenu de la balise title.

• needed : N'afficher que les liens ayant une balise title.

Code xhtml généré

Les infobulles Glincer sont générées par le code Javscript. Voici leur arborescence :

• div#glincer
  • div#d-{id} classe CSS définie par le troisième argument de addToGlincer
    • Texte de l'infobulle (correspond à la balise title).
    • span
      • Url (correspond à la balise href).

Style CSS

Ce code CSS doit impérativement apparaître dans votre feuille de style :

div#glincer div {
position:absolute;
top:0;
left:0;
}

Exemple

Code html :

<p id="apple">
    <a href="/?carnet/tag/apple" id="piuf" title="test">Apple</a> met à jour 
sa gamme de <a href="http://apple.fr/macbook">Macbook</a> 
    et <a href="http://apple.fr/macbookpro">Macbook Pro</a>. 
</p>
<p class="etalors">
Et les <a href="http://apple.fr/imac" title="Hein ?">iMac</a> ?
</p>

Code javascript :

<script type="text/javascript">
$(document).ready(function() {
        var GlincerLoader = new Glincer();
        GlincerLoader.addToGlincer('p#apple a',{link:'external'},'glincer'); (1)
        GlincerLoader.addToGlincer('p.etalors a',{link:'external', title:'needed'},'glincer'); (2)
});
</script>

(1) Tous les liens du paragraphe d'id apple étant de type 'external' auront une infobulle Glincer. Par conséquent le premier lien ne sera pas affiché.
(2) Tous les liens du paragraphe de classe etalors étant de type 'external' et ayant obligatoirement un titre seront affichés.

Compatibilité

Jusqu'à présent, l'application a été testée sous Safari et Firefox. Il se peut qu'elle ne fonctionne pas sous Internet Explorer.

Télécharger

Télécharger Glincer