28173 sujets

CSS et mise en forme, CSS3

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 :

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)
Bonjour a toi aussi

Petit conseil commence par modifier ton post Smiley cligne

En mettant les balise [ code] Ca rend la lecture plus claire

Sinon pour ta réponse class="class1 class2" devrais faire l’affaire Smiley biggrin

A+
Merci ça fonctionne... j'avais essayé mais en séparant par un ";" il fallait juste un espace... merci encore