Aëlys .Hakuna Matata ~
Informations personnelles Âge : 32 Messages : 178 Date d'inscription : 03/06/2009 Localisation : Dans mes logiciels !
| Sujet: {HTML & CSS} Info-bulle sur une image (© Maiko) Mer 14 Oct - 18:50 | |
| © MaikoCSS - 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: -10px; /* 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; } HTML - 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> Résultat : |
|