Problème pour créer une infobulle.

[Botch]

Bonjours.

Alors voila, j'ai le souhait pour mon forum de mettre une barre, juste dessous les boutons "forum", "MP", "connexion"..., et qui contiendrait les avatars des membres du staff du forum comme je l'ai déjà vu sur d'autres forums.

Je voudrait, lorsque l'avatar est survolé qu'une infobulle puisse s'ouvrir en indiquant le le pseudo, la fonction ainsi qu'un lien direct pour MP la personne mais hélas, je suis vraiment nul en tout ce qui concerne le HTML ou le CSS alors si une âme charitable voulait bien m'aider, j'accepterais cette aide avec grand plaisir.

J'espère avoir été assez clair et donc voila le lien du forum : http://wrestlingpassion.forumgratuit.org/

Ainsi que le code actuel :

Code:

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
 
<TD style="TEXT-ALIGN: center; background-image: url(http://www.stpalaissurmer.fr/modules/images/image/php/fond%20orange.jpg) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;
COLOR: #ffffff; " width="100%">
<STRONG><FONT color=black >Le Staff du forum</FONT></STRONG></TD>
 
</TR></TBODY></TABLE>
 
<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center; BACKGROUND-COLOR: orange; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;  COLOR: #ffffff; " width="50%">

<a href="http://wrestlingpassion.forumgratuit.org/u74" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/74-43.png"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u11" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/11-52.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u15" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/25-44.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u17" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/17-46.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u1" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/1-81.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u32" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/32-11.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u35" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/35-24.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u80" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/80-48.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u4" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/4-21.jpg"></a>
<a href="http://wrestlingpassion.forumgratuit.org/u90" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/90-35.png"></a>

</FONT></STRONG></TD>
</FONT></STRONG></TD>
 
</TR></TBODY></TABLE>
 
<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

[Invité]

Bonjour,

Comme ceci?

Code:

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align="center">
<TBODY>
<TR>
 
<TD style="TEXT-ALIGN: center; background-image: url(http://www.stpalaissurmer.fr/modules/images/image/php/fond%20orange.jpg) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;
COLOR: #ffffff; " width="100%">
<STRONG><FONT color=black >Le Staff du forum</FONT></STRONG></TD>
 
</TR></TBODY></TABLE>
 
<TABLE border=0 cellSpacing=3 cellPadding=0 align=center style="TEXT-ALIGN: center; background-image: url(http://www.stpalaissurmer.fr/modules/images/image/php/fond%20orange.jpg) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;
COLOR: #ffffff; " width="100%">
<TBODY>
<TR>
<TD>
 <div class="infobulle"><a href="http://wrestlingpassion.forumgratuit.org/u74" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/74-43.png"></a><span> vos liens</span></div></td>
<td><div class="infobulle"><a href="http://wrestlingpassion.forumgratuit.org/u11" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/11-52.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle"><a href="http://wrestlingpassion.forumgratuit.org/u15" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/25-44.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u17" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/17-46.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u1" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/1-81.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u32" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/32-11.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u35" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/35-24.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u80" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/80-48.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u4" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/4-21.jpg"></a><span> vos liens</span></div></td>

<td><div class="infobulle">
<a href="http://wrestlingpassion.forumgratuit.org/u90" class="postlink"><img style="height:100px; width: 85px;" src="http://r18.imgfast.net/users/1811/26/25/02/avatars/90-35.png"></a><span> vos liens</span></div></td>
 
</TR></TBODY></TABLE>

Ajoutez à votre 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: 10px;
left: 15px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #fff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

Le principe: chaque image est dans une cellule de tableau pour rester en ligne, puis on applique ce code pour chaque avatar:

Code:

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

Et on ajoute la partie CSS dans la feuille de style pour personnaliser.

Bien sincèrement.

[Botch]

Alors je viens d'essayer et c'est exactement cela que je voulais faire !!! Un immense merci pour l'aide, je penserais pas qu'on m'apporterais une réponse aussi rapidement^^