Problème pour créer une infobulle.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème pour créer une infobulle.

Message par Botch le Mer 25 Juil 2012 - 8:57

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>


Dernière édition par Botch le Mer 25 Juil 2012 - 10:09, édité 1 fois

Botch
Nouveau membre

Messages : 17
Inscrit(e) le : 28/06/2012

http://wrestlingpassion.forumgratuit.org/
Botch a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour créer une infobulle.

Message par Invité le Mer 25 Juil 2012 - 9:59

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour créer une infobulle.

Message par Botch le Mer 25 Juil 2012 - 10:09

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^^

Botch
Nouveau membre

Messages : 17
Inscrit(e) le : 28/06/2012

http://wrestlingpassion.forumgratuit.org/
Botch a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum