Infobulles

[Grimmy']

Bonsoir,

J'aimerais pouvoir insérer des infobulles, non seulement sur la PA mais aussi dans les messages & dans le qui est en ligne. Donc j'aimerais avoir les codes a mettre dans le CSS pour faire ça. Ainsi que les codes des infobulles bien sur.

Mon problème est que je ne trouve pas grand chose pour m'aider sur le forum, il y a bien des sujets sur les infobulles mais je ne trouve pas ce que je cherche. J'aimerais aussi pouvoir mettre des url dans les infobulles sur la page d’accueil.

Merci d'avance.

ps ~ je ne sais pas si c'est la bonne section pour cette question mais bon.

[Grimmy']

Et hop petit UP'

[Invité]

Bonsoir,

Une infobulle est constituée d'un code HTML, et d'un code CSS associé.

Le code HTML (message d'accueil, messages, QEEL):

Code:

<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

Le code CSS ( panneau d'amdin' > affichage > couleur > feuille de style CSS) :

Code:

.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 1px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

La partie à personnaliser est la suivante:

Code:

.infobulle:hover span{
visibility: visible;
top: 70px;/*position par rapport au haut de l'image*/
left: 35px;/*position par rapport au bord gauche de l'image*/
width: 150px ;/*largeur de la bulle*/
color:#FFFFFF;/*couleur du texte*/
border: 1px solid #000;/*épaisseurs style et couleur des contours*/
-moz-border-radius: 12px;/*arrondis*/
-webkit-border-radius: 12px;/*arrondis*/
border-radius: 12px;/*arrondis*/}

Pour aligner plusieurs infobulles, placez-les dans un tableau. Exemple pour un ligne de 3 infobulles:

Code:

<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 1">
<span>Contenu de la bulle 1</span></div><div class="infobulle"><img src="lien image ou apparait l'infobulle 2">
<span>Contenu de la bulle 2</span></div></td><td></td><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 3">
<span>Contenu de la bulle 3</span></div></td></tr></table>

Pour le QEEL, il faudra insérer la partie HTML directement dans le template Index_body. Et si vous souhaitez plusieurs sortes d'infobulles, il va falloir jouer avec les noms des class.

Cordialement.

[Grimmy']

Merci beaucoup j'ai réussis a faire ce que je voulais =)