onmouseover et onmouseout sous IE

Version imprimable

Salut,
j'essaie avec le code suivant de créer un effet de transparence avec javacsript lorsque je passe la souris sur mon div et sur les lignes de ma table (j'ai déjà essayé avec css mais j'ai toujours le même résultat que javascript).

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" >
	tr{
		background-color:#000099;
		color:#FFFFFF;
	}
 
	div{
		background-color:#000099;
		color:#FFFFFF;
	}
 
</style>
</head>
 
<body>
<div onmouseover="this.style.opacity=0.5;this.style.filter='alpha(opacity=50)';" onmouseout="this.style.opacity=1; this.style.filter='alpha(opacity=100)'">
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
</div>
<p>
<table width="665" border="1">
  <tr onmouseover="this.style.opacity=0.5;this.style.filter='alpha(opacity=50)';" onmouseout="this.style.opacity=1; this.style.filter='alpha(opacity=100)'">
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
  <tr onmouseover="this.style.opacity=0.5;this.style.filter='alpha(opacity=50)';" onmouseout="this.style.opacity=1; this.style.filter='alpha(opacity=100)'">
    <td>bbb</td>
    <td>bbb</td>
    <td>bbb</td>
  </tr>
  <tr onmouseover="this.style.opacity=0.5;this.style.filter='alpha(opacity=50)';" onmouseout="this.style.opacity=1; this.style.filter='alpha(opacity=100)'">
    <td>ccc</td>
    <td>ccc</td>
    <td>ccc</td>
  </tr>
 </table> 
</body>
</html>

Le problème est que tout marche bien sous mozilla, et non sur ie :cry:.
Avez vous une idée sur le problème ?
Merci de votre aide.

Salut,

Pour IE, le code est le suivant:

Code:

1
2
 
obj.filters.alpha.opacity=40;

D'autre part, toujours pour IE, les filtres ne s'appliquent pas à toutes les balises. Ainsi DIV, IMG, TABLE, et TD sont ok, mais pas TR...
Et pour les DIV, il faut préciser largeur/hauteur, et initialiser le filtre dans le style.

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" >
 
div{
   width:400px;
   height:180px;
   background-color:blue;
   color:#FFFFFF;
}
 
</style>
</head>
 
<body>
 
<img style="opacity:1;filter:alpha(opacity=100)"
 src="http://www.developpez.net/forums/images/logo16.gif" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50;" onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100;" />
 
<div  style="opacity:1;filter:alpha(opacity=100);"
     onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50;" 
     onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100;">
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
	TATATAT<br>
</div>
 
 
</body>
</html>

ERE

26/05/2009, 01h19
casawi

Un grand merci emmanuel.remy pour ta réponse.
une autre question stp, si les filtres ne s'appliquent pas sur les TR, y a t il une autre solution ?
Merci encore.

Citation:

Envoyé par casawi

Un grand merci emmanuel.remy pour ta réponse.
une autre question stp, si les filtres ne s'appliquent pas sur les TR, y a t il une autre solution ?
Merci encore.

Applique les sur l'ensemble des TD de la ligne. Pas génial :cry: mais cela fonctionnera. Quelque chose comme (pas testé, à adapter ;) ) ;
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style type="text/css" > TD { opacity:1;filter:alpha(opacity=100) } </style> function appliqueFiltre(tr, opacMoz, opacIE) { //pour firefox tr.this.style.opacity=opacMoz; //pour IE for (var i=0; i<tr.cells.length;i++) { tr.cells[i].filters.alpha.opacity=opacIE; } } <tr onmouseover="appliqueFiltre(this, 0.5,50);" onmouseout="appliqueFiltre(this, 1,100);" ...>
Et comme tu as pu t'en apercevoir, Firefox n'est pas concerné par ce souci.

ERE

Salut emmanuel.remy
merci encore pour ton aide.
J'ai essayé ta solution, j'obtient le résultat voulu sur Firefox, mais je comprend pas pourquoi il ne marche pas sur ie. En fait j'ai l'erreur suivante :

Citation:

cells[...].filters.alpha a la valeur Null ou n'est pas un objet

j'ai fait un alert

Code:

alert(tr.cells.length);

pour savoir si ie connait la proprieté cells et ça marche il m'affiche 3 !!
voila le code tout entier

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
	tr{
		background-color:#0000CC;
		color:#FFFFFF;
		font-size:18px;
	}
</style>
<script language="javascript">
	function appliqueFiltre(tr, opacMoz, opacIE) {
	   //pour firefox
	   tr.style.opacity=opacMoz;
	   alert(tr.cells.length);
	   //pour IE
	   for (var i=0; i<tr.cells.length;i++) {
		   tr.cells[i].filters.alpha.opacity=opacIE;
	   }
	}
 
</script>
</head>
 
<body>
 
<table width="665" border="1">
  <tr onmouseover="appliqueFiltre(this, 0.5,50);" onmouseout="appliqueFiltre(this, 1,100);">
    <td>aaa</td>
    <td>ddd</td>
    <td>ggg</td>
  </tr>
  <tr onmouseover="appliqueFiltre(this, 0.5,50);" onmouseout="appliqueFiltre(this, 1,100);">
    <td>bbb</td>
    <td>eee</td>
    <td>hhh</td>
  </tr>
  <tr onmouseover="appliqueFiltre(this, 0.5,50);" onmouseout="appliqueFiltre(this, 1,100);">
    <td>ccc</td>
    <td>ffff</td>
    <td>kkk</td>
  </tr>
</table>
</body>
</html>

Et merci encore

27/05/2009, 01h46
emmanuel.remy
Salut,

Et mon
Code:

1 2 3 <style type="text/css" > TD { opacity:1;filter:alpha(opacity=100) } </style>
il est passé où ? ;)

Ajoute le et cela rentrera dans l'ordre !

Bon dev,

ERE
27/05/2009, 01h50
casawi

Salut emmanuel.remy
Tu as raison, je m'excuse pour cette bêtise :oops::oops:

Merci encore
27/05/2009, 02h02
casawi

Salut emmanuel.remy
juste une dernière chose stp avant de clôturer ce sujet, est ce que tu peux m'expliquer pourquoi il ne marche qu'après l'ajout du style des TD ?
et merci infiniment
27/05/2009, 05h01
bigboomshakala

si le style n'a pas été appliqué j'imagine que
myCell.filters = null (ou undefined)
donc myCell.filters.alpha va planter
et donc myCell.filters.alpha.opacity aussi

c'est un problème d'initialisation
27/05/2009, 09h04
le_chomeur

tout a fait bbs, il faut initialiser le filtre avant de l'appliquer :( ( bug ie .... )