Introduction

Pourquoi ce tutoriel a-t-il remplacé celui de Lilypad ?:

Tout d'abord : Qu'est-ce qu'une infobulle ?
Une infobulle est une petite fenêtre qui apparaît lors du passage de votre souris sur du texte ou une image. Elle permet d'ajouter des informations complémentaires, et de gagner de la place.

La partie HTML, création de la base de l'infobulle.

Pour commencer, voici comment présenter du texte à l'intérieur d'un bloc HTML :

Code:

<div>
    TEXTE
</div>

La même chose avec une image :

Code:

<div>
    <img src="IMAGE" alt="nom de l'image" />
</div>

Ou encore avec un lien :

Code:

<div>
    <a href="LIEN">Cliquez ici</a>
</div>

Voire les trois ensemble :

Code:

<div>
    TEXTE
    <img src="IMAGE" alt="nom de l'image" />
    <a href="LIEN">Cliquez ici</a>
</div>

Ensuite nous allons attribuer à notre bloc ce que l'on appelle une classe avec l'aide de l'attribut class, ce qui nous permettra de donner un style CSS à nos éléments HTML, et par voie de conséquence de créer notre infobulle.

Dans ce tutoriel, notre classe s'appellera infobulle.

Voici donc votre code HTML avec cette classe en plus :

Code:

<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
</div>

Ensuite nous allons ajouter le contenu de notre infobulle à notre code.

Code:

<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
    <div>CONTENU DE L'INFOBULLE</div>
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
    <div>CONTENU DE L'INFOBULLE</div>
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
    <div>CONTENU DE L'INFOBULLE</div>
</div>

Vous pouvez constater qu'à l'intérieur du bloc de classe .infobulle ont été créés de nouveaux blocs qui vont à leur tour contenir toutes les informations de votre infobulle. Il est tout à fait possible d'y insérer des liens sans la moindre contrainte, comme ceci :

Code:

<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

Notes :
Si vous souhaitez aller à la ligne, ajoutez la balise <br />.
Si vous souhaitez ajouter une image, ajoutez simplement <<img src="URL_IMAGE" alt="nom de l'image" />.

Nous avons donc notre base HTML et nous pouvons passer au CSS.

La partie CSS, mise en forme de l'infobulle

Nous allons donc nous retrouver désormais dans le Panneau d'Administration, onglet Affichage puis menu Images et couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS. Vous allez écrire votre code CSS dans le champ de texte qui s'affiche.

Code:

div.infobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle > div{
  display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
   display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

   /* on positionne notre infobulle par rapport au bloc conteneur */
   position: absolute;
   top: 5px; /* 5px par rapport au haut du bloc .infobulle */
   left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

   /* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
   background: #ebebeb; /* arrière-plan de l'infobulle */
   color: black; /* texte dans l'infobulle */
   padding: 3px; /* marges internes par rapport aux bords */
   /* bordures de votre infobulle*/
   border: 1px dotted black;
}

Vous pouvez bien entendu changer toutes les propriétés pour que votre infobulle soit personnalisée.
Enregistrez votre feuille de style. Normalement si vous avez bien suivi, votre infobulle devrait apparaître !

Dernier petit détail : cela n'est pas compatible sous Internet Explorer version 6 qui ne prend pas en compte les :hover sur autre chose que des liens Mais tant pis pour ceux qui ne sont pas à jour, ça leur apprendra.