Infobulle

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

Résolu Infobulle

Message par Shak le Lun 20 Mai 2013 - 12:16

Voilà je pensais avoir résolu mon soucis en ayant trouvée des codes CSS et HTML (je crois?) pour faire une infobulle, seulement mon incapacité à faire fonctionner un truc m'empêche de la faire apparaître.. Snifff

Forum pphb2 et sous chrome.

Voilà les codes que j'ai trouvée :

Code CSS (que j'ai mis dans la partie CSS, dans les couleurs) :
Code:
/*----- INFOBULLES ------*/
 
a.imginfo span {
  display: none;
}
 
a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}
 
a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 1020px;
  left: 450px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}

Code html (je crois? Mais il faut le mettre dans le message posté? Je suis perdue..):
Code:
 <a class="imginfo">Lien sur lequel l'infobulle apparaît
<span> image que j'aimerais qui apparaisse au passage de la souris sur le nom de la personne concernée</span>
</a>

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle

Message par Automne le Dim 26 Mai 2013 - 1:53

bonjour,

Une infobulle est constituée d'un code HTML, et d'un code CSS associé.
Le code HTML se place dans message d'accueil, sujets, QEEL, page HTML, dans la description du forum..........

Ici une infobulle sur une image.
Code:
      <div class="imginfo"><img src="lien image ou apparait l'infobulle"><span>Contenu de la bulle</span></div>

Le code CSS que vous avez se place dans panneau d'admin> affichage > couleur > feuille de style CSS

Si vous voulez une infobulle sur un lien avec image et description a l'intérieur de l'infobulle
Le code
Code:
<a class="imginfo" href="#">texte du lien<span><img src="votre image" /><div id="ll">Description de l'infobulle</div></span></a>
Le css a rajouter
Code:
div.ll{margin-right:50px; margin-top:180px;}
Le css complet
Code:
        /*----- INFOBULLES ------*/
       
        a.imginfo span {
          display: none;
        }
       
        a.imginfo:hover {
          background: none;
          z-index: 999;
          cursor: help;
        }
       
        a.imginfo:hover span {
          display: inline;
          position: absolute;
          white-space: nowrap;
          top: 300px;
          left: 350px;
          background: white;
          color: 7d7d7d;
          padding: 3px;
          border: 3px solid #b6b6b6;
  height:200px; width:200px;
} div.ll{margin-right:50px; margin-top:180px;}

Automne
+ Hyperactif +

Messages : 8422
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne 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