infobulle, boite de dialogue ?

[malice23]

Bonjour à tous, c'est encore moi,
(il me semble qu'on ne peut pas poser plusieurs questions dans un même sujet, alors j'en créé un nouveau, si ce n'est pas le cas, désolée).

Je cherche à faire un effet "infobulle" sur mon forum.
Je vous explique :
Je vais créer une cadre "staff" sur ma page d'accueil, en mettant leur avatar. J'aimerais, quand on passe la souris sur l'avatar, qu'une infobulle apparaisse pour mettre des renseignement (par exemple si c'est un modo, un admin ...) plus quelques autres infos pas encore définies.
J'ai trouvé un site qui a l'air très bien, c'est http: http://www.webbricks.org/bricks/bubulle/ Mais je ne comprends absolument pas comment composer mon code et surtout où le mettre.
Si une âme charitable voulais bien m'aider, elle m'enlèverait une belle épine du pied.

PS : Voici un exemple de ce que je voudrais (c'est précisément ça que je veux en fait ^^) Sos rpg

PS²: en y réfléchissant, j'aimerais faire de même pour les avatars des membres dans les sujets, en affichant la feuille de personnage...
Comme pour ce forum : noako

Merci d'avance pour votre aide

[malice23]

up ?

[malice23]

up

[Lixyr]

Cette question a été posée plusieurs fois dans ce forum, avec des réponses intéressantes, mais j'ai la flemme de chercher les sujets en questions, alors je vais faire plus simple, je vais te donner le code avec la démarche, parce qu'avec ton tuto tu te compliques la vie.

Alors, d'une, tu vas dans

PA>>AFFICHAGE>>COULEUR>>FEUILLE DE STYLE CSS.

Ici, tu rentres ce code :

Code:

.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 1px;
  padding-right : 1px;
  padding-top  : 1px;
  padding-bottom : 1px;
    top: 45px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 2px outset #BECCCC;
  border-radius: 5px;
  background-color: transparent;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
}
.lock:hover .lock-hidden {
  display: block;
}

Et tu n'oublies pas d'enregistrer.


Petite explication : tu peux changer certaines choses dans ce code, pour que ton info bulle te corresponde. Cela se passe surtout dans cette partie : .lock .lock-hidden { // }

Tu peux changer ceci :
padding-left : 1px;
padding-right : 1px;
padding-top : 1px;
padding-bottom : 1px;
top: 45px;
left: 0px;

et aussi

border: 2px outset #BECCCC;
background-color: transparent;
-moz-border-radius: 5px;


Tu peuc changer les valeurs en rouge :

- "padding" indique la marge qu'il y a aura entre le bord de ton info bulle et le contenant.
- "top" et "left", indique où se situera ton info bulle par rapport à ton image de base.

et

- "border" correspond au cadre de l'info bulle. Le chiffre correspond à l'épaisseur. "outset", ici le cadre de ton info bulle sera en relief. Si tu veux juste un cadre, tu mets "solid" à la place, si tu le veux en pointillet, tu mets "dotted " etc etc, et tu as à côté, le couleur du cadre.
- background-color c'est la couleur de fond.
- "moz-border-radius" c'est l'arrondis de ton cadre. plus le chiffre est élevé lus ton cadre sera arrondis. Si tu veux un rectangle, tu mets 1.


Ensuite, tu vas dans la partie où tu veux que ton info bulle apparaisse.

Et tu rentres ce code :

Code:

<table>
<tr>
<td><div class="lock">CE QU'IL FAUT PASSER AVEC LA SOURIS<div class="lock-hidden">CE QUI APPARAIT
</div></div>
</td>
</tr>
</table>

donc, tu as compris, ce qu'il faut changer dans ce code c'est CE QU'IL FAUT PASSER AVEC LA SOURIS et CE QUI APPARAIT

dans "CE QU'IL FAUT PASSER AVEC LA SOURIS", tu mets ton image, ou ton mot, ou je ne sais quoi, ce que tu vois au départ, et dans "CE QUI APPARAIT" tu mets ce qui apparait. Ca peut être une image, un lien,un texte, etc etc.

Et tu enregistres.

Si problème persiste n'hésite pas à demander.

[malice23]

d'accord, merci, je vais essayer de faire ça et je te dis...

*edit* pour mettre une image dans background color, je met juste le lien de l'image ?

*edit 2* alors j'ai essayé, le lien de l'image dans background color ça marche pas (j'aurai du m'en douter, on demande une couleur, pas un lien ...). J'ai aussi modifié "top" et "left", pour placer correctement mon infobulle, mais le problème c'est que plus je la met sur la droite (en augmentant "left") plus elle est fine (en gros, elle devient un long baton très fin ... je sais pas si vous me comprenez)

[Lixyr]

background-color, c'est pour la couleur de fond.

L'image tu ne la mets pas là, tu la mets dans ce code là :

Code:

<table>
<tr>
<td><div class="lock">CE QU'IL FAUT PASSER AVEC LA SOURIS<div class="lock-hidden">CE QUI APPARAIT
</div></div>
</td>
</tr>
</table>

Je peux avoir une image de l'aspect de l'info bulle quand elle est "fine" ?

[malice23]

euh ouai, je vais essayer, mais j'ai pas trop le temps de faire en ce moment, alors ça prendra un peu de temps. Je t'envoie un MP quand ce sera fait si tu veux

[malice23]

youpii ! j'ai réussi !

En faisant plein d'essais, en persévérant, en piochant dans ce que je connaissait (depuis le temps que je configure mon forum, j'ai pleins de codes différents maintenant) j'ai enfin réussi à faire ce que je veux !

Voici mes codes, si quelqu'un veut les utiliser :

Code:

.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 2px;
  padding-right : 2px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 90px;
    left: 45px;
      width: 100px;
  /* style du bloc qui apparait */
  color: #707070;
  border: 1px solid #7A5E5E;
  border-radius: 3px;
  background-image: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png");
  -moz-border-radius: 3px;
  text-align: center;
    visibility: visible;
}
.lock:hover .lock-hidden {
  display: block;
}


et dans ma page d'accueil :

Code:

   <table >
   <tbody><tr>
   <td><div class="lock">
   <img src="http://i21.servimg.com/u/f21/15/41/20/11/esfera10.jpg"><div class="lock-hidden">Admin en chef<br>Infos à venir<br><i><a href="http://esfera.monalliance.net/profile.forum?mode=viewprofile&amp;u=1">Profil</a></i>
   </div></div>
   </td>
   </tr>
   </tbody></table>


L'adresse du forum c'est http://esfera.monalliance.net (l'infobulle est pour le staff) Je suis contente de moi ^^