[css] hover opacity

Version imprimable

[css] hover opacity

bonsoir !
la réponse doit être très simple mais j'avoue que là je trouve pas :(
simple, j'ai un bouton (img) qui se voit attribuer un hover, au repos, elle a une opacité de 10, et en survol normalement je voudrais 100 hors donc je n'ai pas l'effet escompté :( cela doit être la fatigue ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<body>
 
 
 
<style>
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:0px;
  left:0px;
  margin:0px 0px;
  z-index: 45;
 }
 
 
.video
  {
  background-image: url(th008.gif);
  position:absolute;
  background-repeat: no-repeat;
  top:8px;
  left:500px;
  width: 38px;
  height: 38px;
  padding: 0;
  z-index:60;
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
  }
 
 .video:hover
  {
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1
  }
 
 .video:active
  {
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1
  }
 
 
 
</style>
 
<div class="video" onclick="showDiv();">
</div>
 
<div class="FLVplayer" id="monid">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=alice.FLV">
	<param name="movie" value="flvplayer.swf?file=alice.FLV" />
	<param name="wmode" value="transparent" />
</object>
</div>
 
 
<script language="javascript">
function showDiv(){
   document.getElementById('monid').style.display = (document.getElementById('monid').style.display == '')?"block":"";
}
</script>
 
</body>
</html>

merci d'avance ^^

22/09/2006, 09h15
Bisûnûrs

C'est normal si tu es avec IE, il ne gère la propriété hover que pour les liens et non les div.
22/09/2006, 11h06
qmulonainbus

Merci pour l'éclairage :)

j'ai certe IE6
mais je bosses surtout avec FFox
c'est sous firefox que ça ne fonctionne pas

Tu peux passer par du javascript :

Code:

1
2
<div class="video" id="monid" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript">
function opac(){
   if(document.getElementById("monid").style.filter == "alpha(opacity=100)"){
      document.getElementById("monid").style.filter = "alpha(opacity=10)";
      document.getElementById("monid").style.MozOpacity = "0.1";
      document.getElementById("monid").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("monid").style.filter = "alpha(opacity=100)";
      document.getElementById("monid").style.MozOpacity = "1";
      document.getElementById("monid").style.KhtmlOpacity = "1";
   }
}
</script>

22/09/2006, 11h40
qmulonainbus

merci ça marche quasiment
je recontre les pb suivants :
-le bouton est à opacité 100jusquau premier passage de la souris, alors que j'aimerais qu'il soit dès le début à 10.
-et plus grave, les propriétés javascript qu'il y avait avant introduction du code ne fonctionnent plus...

help:(
22/09/2006, 11h46
Bisûnûrs
:arrow: Si tu as ton code
Code:

1 2 3 4 .video { opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1 }
Je vois pas où est le problème ..

:arrow: Vérifie bien que ton id est le bon si tu l'as modifié, ne jamais recopier un code bêtement.
22/09/2006, 11h54
qmulonainbus
oups désolé erreur de ma part
j'avais pas la bonne version de mon fichier
Code:

1 2 3 4 .video { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1 }
par contre je n'ai pas changer l'iD, bizarre
je vérifie bien et je te tien au courant:)
22/09/2006, 12h05
Bisûnûrs

Au passage, je viens de vérifier ton autre topic dans le forum Javascript, tu as bien recopié "bêtement" mon code.

Dans ce cas, tu as deux éléments div avec le même id : monid.

Renomme un des deux id en n'oubliant pas de changer "monid" aussi dans le javascript correspondant à la fonction appelée.
22/09/2006, 12h12
qmulonainbus

mea culpa
en appliquant le code kerod, je me suis rendu compte que il y avait 2 fois le même ID, 2s après je regarde voir si j'ai une réponse (dans le négatif ct prévu de changer ^^ )
donc merci

old <du côté de l'opacité tout fonctionne impec>

*MAJ*
j'ai parlé trop vite, l'opacité marche si on ne met rien en marche, si on a déjà cliquer sur la bouton, lopacité est toute perdue, elle se met à 0.1 quand on passe dessus et à 100 le reste du temps

bon ce n'est que avec le nouveau bout de code de kerod que ça plantouille
donc je vais pas occuper 2 post pour celà ;) (rendez-vous rubrique javascript)