Infobulle dans un message

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

Résolu Infobulle dans un message

Message par Alexandra59 le Jeu 14 Avr 2011 - 18:07

Bonjour,

Je ne sais pas vraiment si c'est possible, mais j'aimerais faire des infobulles dans des messages (infobulle pour image). Est-ce possible ?


Dernière édition par Alexandra59 le Ven 15 Avr 2011 - 9:14, édité 1 fois

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans un message

Message par Marie-Mizuki le Ven 15 Avr 2011 - 8:05

Bonjour, oui c'est possible.

CSS à mettre dans Affichage>Couleur>Feuille de Style CSS

Code:
a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px dotted black;
  border-left: 1px dotted black;
}

A mettre dans votre message, il contient une image et un lien.

Code:
<a href="#" class="infobulle"><img src="IMAGE EXTERIEUR">
<span>
<img src="IMAGE INTERIEUR">
<br><div><a href="LIEN">NOM DU LIEN</a></div>
<br></span></a>
<br></br>

Code:
<br>

Permet de revenir à la ligne.

Pour mettre une image à l'intérieur de l'infos bulle il faut inséré ceci:
Code:
<img src="IMAGE INTERIEUR">

Pour un lien:
Code:
<div><a href="LIEN">NOM DU LIEN</a></div>

Pour un texte simple, il y a besoin de rien.
L'infos bulle est régler pour avoir cette effet là:

Marie-Mizuki
*

Féminin
Messages : 46
Inscrit(e) le : 10/04/2008

http://marie-mizuki.vampire-legend.com/index.htm
Marie-Mizuki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle dans un message

Message par Alexandra59 le Ven 15 Avr 2011 - 9:14

Merci bien.

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 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