Les Infobulles

[jerome59164]

Bonsoir, j'ai fais le tour et je n'ai pas vu pour les infobulles.

Je voudrais savoir le code pour en mettre sur la page d'accueil, mais je ne retrouve plus du tout le code, ça serait pour savoir si quelqu'un le connaissait ?

http://charmed-returns.jeun.fr/index.htm

[Invité]

Bonsoir

J'utilise ces codes pour les infobulles.
Message en page d'accueil:

Code:

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

La feuille de style CSS à personnaliser selon vos convenances:

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 outset #FF0000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

Cordialement.

[jerome59164]

Merci beaucoup, ça va m'aider

[jerome59164]

C'est bon, j'ai trouvé merci =)

[jerome59164]

Re j'ai encore un petit soucis, quand je fais ma page d'accueil, il y a la photo de prue qui est au dessus :

http://charmed-returns.jeun.fr/index.htm

Code:

<span class="genmed"><table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">Le Staff de Charmed Returns</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">Contexte</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">Nos Partenaires</th>
</tr>

<span class="postbody"></span></td>

<td class="row3" colspan="1" rowspan="1" align="center" valign="top"><span class="postbody">
Fondateurs :Nolan Spencer<div class="infobulle"><img src="http://i28.tinypic.com/2q3p65d.jpg">
<span><img src="http://www.weplug.com/images_1/1ce5925da7474d0a0671a503591d05fb20090319175308.gif" border="0" alt="" />
Co-Fondateur</span></div></span></td><div class="infobulle"><img src="http://s1.e-monsite.com/2010/06/19/04/Shannen-Ic1.png"><span><img src="http://de.img.v4.skyrock.net/dea/gifdecharmed/pics/340385162.gif" border="0" alt="" />
Prudence Halliwell</span></div></span></td>


<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">A SUIVRE BIENTÔT.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">BIENTÔT.
</span></td>

<tr><th class="thTop forabg" colspan="1" rowspan="1">Liens Utiles</th>
<th class="thTop forabg" colspan="1" rowspan="1">On les veut
<br></th><th class="thTop forabg" colspan="1" rowspan="1">TON TITRE
<br></th></tr>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>
</table>

Si quelqu'un peut me dire où il y a un soucis merci

[Invité]

Re,

Vous avez fermé des balises qui n'étaient pas ouvertes, ce qui crée un bug.

<span class="genmed"><table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">Le Staff de Charmed Returns</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">Contexte</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">Nos Partenaires</th>
</tr>

<span class="postbody"></span></td>

<td class="row3" colspan="1" rowspan="1" align="center" valign="top"><span class="postbody"><table><tr><td>
Fondateurs :Nolan Spencer<div class="infobulle"><img src="https://2img.net/h/oi28.tinypic.com/2q3p65d.jpg">
<span><img src="http://www.weplug.com/images_1/1ce5925da7474d0a0671a503591d05fb20090319175308.gif" border="0" alt="" />
Co-Fondateur</span></div></span></td><td><div class="infobulle"><img src="http://s1.e-monsite.com/2010/06/19/04/Shannen-Ic1.png"><span><img src="http://de.img.v4.skyrock.net/dea/gifdecharmed/pics/340385162.gif" border="0" alt="" />
Prudence Halliwell</span></div></span></td></td></tr></table>


<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">A SUIVRE BIENTÔT.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">BIENTÔT.
</span></td>

<tr><th class="thTop forabg" colspan="1" rowspan="1">Liens Utiles</th>
<th class="thTop forabg" colspan="1" rowspan="1">On les veut
<br></th><th class="thTop forabg" colspan="1" rowspan="1">TON TITRE
<br></th></tr>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>
</table>

J'ai mis en bleu ce que j'ai modifié pour que ça fonctionne. Sur mon forum test les 2 images sont dans la même case du tableau.

Cordialement

[jerome59164]

Merci beaucoup