Ce tutoriel a été publié par Basil Hawkins sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Bonsoir !

Vous me direz : mais y a déjà un tutoriel sur les infobulles !! Certes, mais il n'est pas correct, des navigateurs ne marchent pas avec et surtout, on ne peut pas afficher des liens.

Partie à copier/coller dans Affichage ► Images et Couleurs ► Couleurs ► Onglet 'Feuille de style CSS', ne pas oublier de valider :

Code:

div.infobulle {
  position: relative;
  float: left;
}

div.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover span {
display: inline;
position: absolute;
top: Ypx;
left: Xpx;
background-color: #FFFFFF;
color: #000000;
padding: 2px;
border: 1px solid #000000;
}

Y correspond à combien de pixels l'infobulle va être décalé vers la droite par rapport à l'image.
X correspond à combien de pixels l'infobulle va être décalé vers la bas par rapport à l'image.
"color" correspond à la couleur du texte dans l'infobulle.
"background-color" correspond à la couleur de fond de l'infobulle.
"border" correspond à la bordure (là c'est une bordure pleine de 1px de couleur noire).
"padding" correspond à la marge intérieure (en clair, de combien de pixels votre texte va être écarté de la bordure).


Partie HTML :

Code:

<div class="infobulle"><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/73540.gif" />

<span>Padadapadipadi ...<br /><br /><div><a href="http://www.sos-forum.com/">Un Lien !</a></div><br /><div><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/115232.gif" /></div></span></div>

Comme vous l'aurez remarqué dans mon code HTML, il faut entourer les liens et les images à l'intérieur de la balise "span" d'une balise "div". Concernant l'apparence de l'infobulle, ça se fait dans le CSS

Donc pour afficher une image ou un lien dans l'infobulle il faut faire ceci :

Code:

<div><a href="http://mon_domaine.com/">Allez sur Mon Domaine !</a></div>

<div><img src="http://www.sos-forum.com/users/1613/87/30/54/smiles/260113.gif" /></div>

Voilà tout, en espérant que le tutoriel vous servira

Peut être faudrait il juste donner une explication sur la manière de placer le contenu pour les néophytes.

Merci en tout cas !

Hello,
Voilà c'est arrangé, en espérant que ça suffise (non parce que l'explication des choses et moi ça fait deux =p)