Infobulles dans un message

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

Résolu Infobulles dans un message

Message par Addicted-People le Sam 27 Fév 2010 - 21:29

    Bonsoir,

    J'aimerais savoir comment réaliser l'effet suivant :

    ICI

    C'est à dire, lorsque l'ont fait passer la souris sur l'icon d'un personnage un texte apparaît.

    Merci d'avance pour votre aide I love you

Addicted-People
*

Messages : 30
Inscrit(e) le : 26/05/2009

http://dangerous-hope.vampire-legend.com
Addicted-People a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles dans un message

Message par Threax le Dim 28 Fév 2010 - 12:33

Bonjour,

Insérez ce code dans votre CSS :
Panneau d'administration Affichage Couleurs Feuille de style CSS

Code:
a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 500;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 100px;    /*---- Position de la grande image ----*/
  left: 300px; /*---- Position de la grande image ----*/
  background: #FFFFFF; /*---- Couleur de fond derrière l'image ----*/
  color: #7d7d7d;  /*---- Couleur du texte au dessus ou sous l'image ----*/
  padding: 3px;  /*---- Espace entre la bordure et le contenu (marge) ----*/
  border: 3px solid #b6b6b6; /*---- Couleur et style de la bordure ----*/
}

A l'endroit où vous souhaitez la petite image, ajoutez :
Code:
<a class="imginfo"><img src="URL DE L'ICÔNE" />

<span><b>Texte qui</b>: <br />
 apparaît au survol</span>
</a>

Pour modifier l'endroit où le texte apparaît, la couleur du cadre, etc., vous devez modifier ceci dans le CSS.
Pour modifier l'endroit où elle apparait, vous devez modifier cette partie :
Code:
  top: 100px;    /*---- Position de la grande image ----*/
  left: 300px; /*---- Position de la grande image ----*/
Actuellement, l'image apparaît à 100px du haut de votre écran, et à 300px de la gauche de votre écran. Smile

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax 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