je voudrais associer deux "class", la première "opacity" (qui permet l'opacité d'une image au survol de lasourie) et la seconde la class "info" (qui permet de faireune infobulle au survol d'une image). En fait je voudrais en passant sur une image qu'elle déclenche une infobulle (info) et qu'elle se grise (opacity), j'arrive a faire l'une ou l'autre, mais je voudrais lier les deux pour que les deux "class" fonctionnent en même temps, comment faire ??
Je vous mets le code de mes deux fichiers .css + le code html :
info.css :
> Code html pour "info"
opacity.css :
> Code html pour "opacity"
Voilà donc je voudrais associer les deux, je ne vois pas comment faire, passer la souris sur une image (qui se grise, donc pointant vers un lien) et qui fait apparaire une infobulle en même temps.
merci de vos réponses.
Modifié par gsans (01 May 2006 - 21:19)
Je vous mets le code de mes deux fichiers .css + le code html :
info.css :
a.info {
position:relative;
border-bottom: none;
text-decoration: none;
font-weight: none;
visibility: none;
}
a:hover.info {
text-decoration: none;
background: none;
}
a.info span {display: none;}
a:hover.info span {
display: inline;
position: absolute;
top:0.5em;
left:0.5em;
z-index: 20;
background: #446D87;
color: #fff;
border:1px solid #000;
width:150px;
text-align:center;
font-weight:normal;
font-size: 10px;
line-height:12px;
padding:2px 4px;
}
> Code html pour "info"
<link href="SiteWeb/info.css" rel="stylesheet" type="text/css" />
<a class="info" a href="#"><img src="SiteWeb/image.jpg" /><span>définition dans infobulle</span></a>
opacity.css :
a.opacity img {filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;}
a.opacity:hover img {filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}
> Code html pour "opacity"
<link href="opacity.css" rel="stylesheet" type="text/css">
<a class="opacity" href="index.htm" target="wclose"
onclick="window.open('recompenses.htm','wclose',
'width=1004,height=450,toolbar=no,status=no,left=0,top=30')"><img src="image.jpg" width="81" height="85" border="0">
Voilà donc je voudrais associer les deux, je ne vois pas comment faire, passer la souris sur une image (qui se grise, donc pointant vers un lien) et qui fait apparaire une infobulle en même temps.
merci de vos réponses.
Modifié par gsans (01 May 2006 - 21:19)