Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

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
avatar

Threax
Membre actif

Masculin
Messages : 17276
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