infobulle, boite de dialogue ?

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

Résolu infobulle, boite de dialogue ?

Message par malice23 le Sam 11 Sep 2010 - 22:39

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


Dernière édition par malice23 le Sam 18 Sep 2010 - 17:56, édité 1 fois

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par malice23 le Lun 13 Sep 2010 - 21:14

up ?

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par malice23 le Mar 14 Sep 2010 - 17:00

albino up

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: infobulle, boite de dialogue ?

Message par Lixyr le Mer 15 Sep 2010 - 11:38

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.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par malice23 le Mer 15 Sep 2010 - 16:13

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)

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par Lixyr le Mer 15 Sep 2010 - 17:40

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" ?

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par malice23 le Sam 18 Sep 2010 - 12:34

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

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle, boite de dialogue ?

Message par malice23 le Sam 18 Sep 2010 - 17:55

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

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 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