Problème de code infobulle

[Cécilia De Fändir]

Bonjour !

Je sais vous allez me dire : il y a déjà plein de sujet sur les infobulles ! Faut aller regarder là bas... mais j'ai déjà recherché et ça m'a bien aidé. J'ai trouvé des codes qui correspondent bien. Mais ce que je veux ne fonctionne pas, je dois m'y prendre mal avec le/les code(s).....

Ce que je souhaite faire : Dans le staff de mon forum, sur la page d'accueil, je souhaite afficher une petite image texte avec le rang de la personne lorsque le curseur passe au dessus du portrait de la personne en question. Il y a donc deux images : l'une qui est déjà en place sur la page d'accueil et qui montre la personne, l'autre, qui doit apparaître lorsque l'on passe le curseur dessus.

Mon soucis : L'image infobulle, au lieu d'apparaître au moment où le curseur passe sur la première image, se place sous cette dernière sans aucun effet. Elle s'affiche donc en permanance sous l'autre, même quand le curseur n'est pas dessus. Je pense que les codes que j'utilise ont un défaut. Mais je ne m'y connais pas super bien en codage donc je ne trouve pas d'où ça vient.

Les deux codes que j'ai tenté d'utiliser :

Code:

<div class="infobulle"><img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span>

Code:


<a class="imginfo"> <img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png" /></span></a>

Donc en attendant de trouver d'où vient le soucis, j'utilise un title sur l'image du portrait de la personne. Se code marche parfaitement mais au niveau des effets voulus je trouve ça pas super. Il se contente juste de mettre un titre sur fond bizarre jaune poussin et puis le temps d'affichage quand la souris reste dessus est assez long.

Voici le code qui marche mais ce n'est pas ça que je veux:

Code:

<img src="http://img4.hostingpics.net/pics/496153Erikapng.png" title="Impératrice des pirates / Co-Fondatrice" border="0" alt="" />

Vous verrez ce que ça donne en allant voir notre page d'accueil : http://fandir.forumgratuit.org/


Voilà j'espère que quelqu'un pourra m'aider à trouver le problème avec ces codes !
Bonne journée !
Cordialement,
Cécilia De Fändir

[Invité]

Bonjour,

Pour que le code fonctionne , il faut qu'un code CSS lui soit associé.
Si vous utilisez ce code dans votre message d'acceuil:

Code:

<div class="infobulle"><img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span>

Le CSS (a placer dans panneau d'admin' > Affichage > couleurs - feuille de style CSS) est:

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

Il est à personnaliser selon vos souhaits.

Pour que l'affichage des infobulles se fasse bien, placez-les dans un tableau:

Code:

<table><tr><td> code infobulle 1</td><td> code infobulle 2 </td></tr></table>

Cordialement.

[Cécilia De Fändir]

Merci beaucoup pour cette réponse !

Le code css doit être placé à part c'est ça ? Dans panneau d'admin' > Affichage > couleurs - feuille de style CSS mais du coup le reste du code de la page d'accueil ne vas pas avec non ? Elle reste là où elle est ?

Ce code à mettre dans une feuille CSS ne me servirait qu'à débloquer la fonction donc. Désolée mais je ne suis pas une pro du codage ^^

Sinon, les infobulles se trouvent déjà dans un tableau vu que la page d'accueil est organisée en tableau. Je dois réorganiser le tableau ou je peu laisser la page d'accueil comme elle est ?

Merci encore !

[Cécilia De Fändir]

Désolée pour le double post !

Le code marche super bien ! Seul soucis, quand j'essaye de faire mon tableau des infobulles dans le tableau déjà existant de la page d'accueil..... ça me casse tout mon tableau.... ^^

[Invité]

Vous pouvez placer le contenu de votre page d'accueil ici entre les balises code, s'il vous plait? Je vais essayer de trouver ce qui pose problème.

Si vous avez besoin de plus d'infos sur le CSS, voici le tutoriel:
> https://forum.forumactif.com/t301866-le-css-comment-ca-marche

Cordialement.

[Cécilia De Fändir]

Oh c'est sympa ! Par contre il est long.....

Il s'agit de deux tableaux l'un sous l'autre d'une ligne et trois colonnes chacun. Mais les lignes et colonnes n'ont pas les même dimensions c'est pour ça que j'ai préféré séparer en deux tableaux distincts. Et vu que je ne suis pas une pro du codage, ça risque d'être un peu le fouillis là dedans...

Le code entier :

Code:

<span style="text-decoration: underline;"><img src="http://img4.hostingpics.net/pics/635436contexte.png" border="0" alt="" /><br>

<table style=""><tr><td align="left" style="text-align: center;" width="400" height="300">
<a href="http://fandir.forumgratuit.org/la-bibliotheque-f12/les-groupes-sur-fandir-t51.htm?tid=4bc69d3c39a42ca79a2f38479eb3cf38" class="postlink"><img src="http://img4.hostingpics.net/pics/757725groupes.png" border="0" alt="" /></a>
<a href="http://fandir.forumgratuit.org/la-bibliotheque-f12/histoire-de-fandir-t50.htm?tid=4bc69d3c39a42ca79a2f38479eb3cf38" class="postlink"><img src="http://img4.hostingpics.net/pics/422326histoirecopie.png" border="0" alt="" /></a>
<a href="http://fandir.forumgratuit.org/la-bibliotheque-f12/la-carte-du-nouveau-monde-t52.htm#116?tid=4bc69d3c39a42ca79a2f38479eb3cf38" class="postlink"><img src="http://img4.hostingpics.net/pics/256845carte.png" border="0" alt="" /></a>
<a href="http://fandir.forumgratuit.org/t160-les-naakti?tid=4bc69d3c39a42ca79a2f38479eb3cf38" class="postlink"><img src="http://img4.hostingpics.net/pics/342564Naakti.png" border="0" alt="" /></a>
<a href="http://fandir.forumgratuit.org/t184-code-d-honneur-de-la-piraterie?tid=4bc69d3c39a42ca79a2f38479eb3cf38" class="postlink"><img src="http://img4.hostingpics.net/pics/911388code.png" border="0" alt="" /></a></td>

<td align="left" style="text-align: center;" width="250" height="300">
<img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t13.png" border="0" alt="" /><br> <div class="infobulle"><img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span><br> <div class="infobulle"><img src=" http://img4.hostingpics.net/pics/694630Ceciliapng.png "/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span></td>

<td align="left" style="text-align: center;" width="350" height="300"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t14.png" border="0" alt="" /><br><br> 
<img src="http://img4.hostingpics.net/pics/274192Winston.png" title="Gouverneur" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/641382Sigridpng.png" title="Maître voilier de l'Impérial" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/634287Angelo.png" title="Prêtre de Glénia" border="0" alt="" /><br><br> 

<img src="http://img10.hostingpics.net/pics/699301Kane.png" title="Maïtre d'équipage de l'Impérial" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/489590Mariannepng.png" title="Maître canonnier de l'Impérial" border="0" alt="" /><img src="http://img10.hostingpics.net/pics/917961Yvon.png" title="Boulanger à Glénia" border="0" alt="" /></td></tr></table>

<table style=""><tr><td align="left" style="text-align: center;" width="210" height="200"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t16.png" border="0" alt="" /><div style="margin:auto;text-align:center;width:100%"><br>

<MARQUEE behavior="scroll" align="center" direction="UP" height="200" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <center>
<a href="http://aekeva.forumactif.com/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img10.hostingpics.net/pics/816260bouton_partn.png" border="0" alt="" /></a> <a href="http://ephaelya.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa26.casimages.com/img/2011/01/04//110104021802885944.jpg" border="0" alt="" /></a>

<a href="http://les4royaumes.forumperso.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img709.imageshack.us/img709/2128/copiedecopiedesanstitret.png" border="0" alt="" /></a> <a href="http://revia-rpg.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i53.tinypic.com/121324h.png" border="0" alt="" /></a>

<a href="http://nerethnit.forum-canada.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img837.imageshack.us/img837/6167/iconnp.png" border="0" alt="" /></a> <a href="http://pirate-du-monde.un concurrent.fr/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img42.xooimage.com/files/b/8/0/part-235fb48.png" border="0" alt="" /></a>

<a href="http://mandalor.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img4.hostingpics.net/pics/449630Sanstitre1.png" border="0" alt="" /></a> <a href="http://rp-vampire.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img823.imageshack.us/img823/4570/logova.png" border="0" alt="" /></a>

<a href="http://eludian.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i27.servimg.com/u/f27/15/67/97/45/88x31_11.jpg" border="0" alt="" /></a> <a href="http://kiowenai.forumsactifs.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://i19.servimg.com/u/f19/14/59/31/25/bouton11.png" border="0" alt="" /></a>

<a href="http://lanneg-rpg.forumactif.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://i56.tinypic.com/wirouq.jpg" border="0" alt="" /></a> <a href="http://capalouest.1fr1.net/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://i28.tinypic.com/34eu9a9.jpg" border="0" alt="" /></a>

<a href="http://de-l-autre-cote.un concurrent.fr" class="postlink" target="_blank" rel="nofollow"><img src="http://img64.xooimage.com/files/1/6/7/8831-2828f97.png" border="0" alt="" /></a> <a href="http://no-exit.forum-actif.net/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://imgur.com/K43CS.jpg" border="0" alt="" /></a>

<a href="http://leseigneurdesanneaux.superforum.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img687.imageshack.us/img687/4231/backtodagordagorath.png" border="0" alt="" /></a> <a href="http://endlessuntildeath.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img62.xooimage.com/files/0/b/4/no-lifes-26a9238.jpg" border="0" alt="" /></a>

<a href="http://horirozari.rpgdynasty.com/index.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img269.imageshack.us/img269/4688/acade.png" border="0" alt="" /></a> <a href="http://antarcia.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img10.hostingpics.net/pics/980787bouton1d.png" border="0" alt="" /></a>

<a href="http://entre-monde.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://aozora.pagesperso-orange.fr/logos/boutonem100353.jpg" border="0" alt="" /></a> <a href="http://dgm-destiny.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i52.tinypic.com/hvqesl.jpg" border="0" alt="" /></a>

<a href="http://judgementsday.iowoi.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img193.imageshack.us/img193/1825/boutono.png" border="0" alt="" /></a> <a href="http://dark-hope.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa26.casimages.com/img/2011/03/18/110318090713883347.jpg" border="0" alt="" /></a></center></MARQUEE> </div>
 

</td><td align="left" style="text-align: center;" width="700" height="200"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t17.png" border="0" alt="" /><br><br> 

<img src="http://img4.hostingpics.net/pics/886889continent.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/353378tempte.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/140905tempte2.png" border="0" alt="" />
<img src="http://img4.hostingpics.net/pics/245037pleinemer.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/353378tempte.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/140905tempte2.png" border="0" alt="" />
<img src="http://img4.hostingpics.net/pics/326320ybella.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/353378tempte.png" border="0" alt="" /><img src="http://img4.hostingpics.net/pics/140905tempte2.png" border="0" alt="" />
</td><td align="left" style="text-align: center;" width="90" height="200"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t19.png" border="0" alt="" /><br><br> 

<a href="http://rpgaddict.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t11.png" border="0" alt="" /></a> 

<a href="http://www.tourdejeu.net/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://enaevolare.lostmindy.net/images/tourdejeu.jpg" border="0" alt="" /></a> 

<a href="http://www.sawen.net/http://www.sawen.net/sawentop.jpg" class="postlink" target="_blank" rel="nofollow"><img src="http://enaevolare.lostmindy.net/images/sawen.jpg" border="0" alt="" /></a>
 
<a href="http://hexagone.fede.free.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa15.casimages.com/img/2010/05/24/mini_100524060409927084.png" border="0" alt="" /></a> 

<a href="http://cercle.des.huit.free.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://enaevolare.lostmindy.net/images/cerclehuit.jpg" border="0" alt="" /></a> 

<a href="http://annuaire-rn.forumactif.org/portal.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://illiweb.com/fa/pbucket.gif" border="0" alt="" /></a> 

</td></tr></table><br><div style="margin:auto;text-align:center;width:100%"><img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t18.png" border="0" alt="" /></div></span>

La partie du code avec les infobulles (deuxième colonne du premier tableau):

Code:

<td align="left" style="text-align: center;" width="250" height="300">
<img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t13.png" border="0" alt="" /><br> <div class="infobulle"><img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span><br> <div class="infobulle"><img src=" http://img4.hostingpics.net/pics/694630Ceciliapng.png "/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span></td>

Merci pour tout en tout cas !

[Invité]

Bonsoir,

Il n'y a pas de soucis dans votre tableau , il est d'ailleurs superbe! L'erreur vient de moi, j'ai oublié de fermé la div de l'infobulle en vous donnant le code. Je répète sans arrêt "toute balise ouverte doit être fermée" ... et j'ai fait l'erreur . Il manque juste le </div> à la fin du code:

<div class="infobulle"><img src="https://2img.net/r/hpimg4/pics/496153Erikapng.png"/><span><img src="https://2img.net/r/hpimg11/pics/264692Sanstitre1.png"/></span></div>

Pour vos infobulles cela donne:

Code:

<td align="left" style="text-align: center;" width="250" height="300">
    <img src="http://i27.servimg.com/u/f27/15/97/55/42/sans_t13.png" border="0" alt="" /><br> <div class="infobulle"><img src="http://img4.hostingpics.net/pics/496153Erikapng.png"/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span></div><br> <div class="infobulle"><img src=" http://img4.hostingpics.net/pics/694630Ceciliapng.png "/><span><img src="http://img11.hostingpics.net/pics/264692Sanstitre1.png"/></span></div></td>

Normalement, il n'y a plus de soucis.

Cordialement.

[Cécilia De Fändir]

Oh ! D'accord ! Ne vous en faites pas, l'erreur est humaine ! Et puis le tout est d'avoir trouvé la solution !

J'essaye le nouveau code tout de suite et je vous tiens au courant du résultat !

Merci pour tout !

EDIT : Le code marche parfaitement ! Merci encore !