Bonjour !
En fait j'aimerai réaliser des infobulles avec ce que j'ai déjà sur ma pages d'accueil : lorsqu'on passe la souris sur les icons, cela "s'éclaire" ou plutôt, l'image reprend ses couleurs normales. J'aimerai pouvoir créer une infobulle, lorsque je passe la souris sur cette image.
PS : Pour voir les images > http://life-is-a-game.forumotion.com/index.htm Sur la Page d'accueil j'ai mis les images (:
Cependant, lorsque je fais "basiquement" ceci :
- Code:
-
<a class="ADMINS"><div class="opacity"><img src="http://i68.servimg.com/u/f68/14/98/85/36/adm310.png"></div>
<span><img src="http://www.notulus.com/photos/groupe/vignette/photo_groupe_num_672.jpg"><div><a href="http://life-is-a-game.forumotion.com/msg.forum?mode=post&u=1" class="ADMINS">Contact</a></div></span></a>
Ca ne marche pas, bien évidemment, et à cause du DIV je pense mais du coup je ne sais pas comment faire =/
[voici mon CSS]
- Code:
-
/* BULLES III liste des admins */
a.ADMINS {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}
a.ADMINS span {
display: none; /* on masque l'infobulle */
}
a.ADMINS:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
a.ADMINS:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 5px; /* on positionne notre infobulle */
left: 10px;
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
border-left: 5px solid #400000;
border-right: 3px solid #400000;
border-top: 3px solid #400000;
border-bottom: 5px solid #400000;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
width: 100px;
}
Lun 03 Juin 2024, 17:20 par 
