Morgane
New New New Member
 Age : 31
Messages : 19
Date d'inscription : 25/03/2010
Copyright : C'est moi
 | | Sujet: Faire une infobulle Jeu 25 Mar - 19:54 | |
| Pour faire une infobbule il y'a 2 solutions Solution 1Coller ceci dans votre feuille de style CSS - Code:
-
* {
font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
}
a.info {
position: relative;
color: #576186;
text-decoration: none;
}
a.info span {
display: none; /* on masque l'infobulle */
font-size: 12px;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on 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: 60px; /* on positionne notre infobulle */
left: 60px;
background: #C0CDE5;
color: #576186;
padding: 3px;
border: 3px solid #3E3D70;
} Puis coller ceci dans votre page d'acceuille ou message - Code:
-
<a class="info">texte<span>texte info bulle</span></a> Solution 2 Coller ceci dans la feuille de style CSS - Code:
-
a.imginfo {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}
a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on 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: 30px; /* on positionne notre infobulle */
left: 20px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
border-left: 5px solid #b6b6b6;
border-right: 3px solid #b6b6b6;
border-top: 3px solid #b6b6b6;
border-bottom: 5px solid #b6b6b6;
} Puis coller ceci dans votre page d'acceuille ou message - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE PRINCIPALE"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="1">TEXTE PRINCIPAL</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="IMAGE DANS LA BULLE"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE DANS LA BULLE<br/></font></td></tr><tr align="center"/></tbody></table></span></a> | |
|
Jenni K - Queen of Hearts
Compagnon du Docteur
Age : 36
Messages : 815
Date d'inscription : 17/12/2009
Copyright : avatar@Ches et sign@Kath
| | Sujet: Re: Faire une infobulle Mar 6 Avr - 16:02 | |
| Suppression immédiate  Le tuto a été pris sur Acide Edulcoré. Je peux même dire que le second code appartient à Pumpkin. J'envoie un message à Morgane pour lui dire  | |
|
