onmouseover et onmouseout sous IE

**casawi** · 25/05/2009, 20h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.
Avez vous une idée sur le problème ?
Merci de votre aide.

**emmanuel.remy** · 26/05/2009, 00h45

Salut,

Pour IE, le code est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**casawi** · 26/05/2009, 01h19

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.

**emmanuel.remy** · 26/05/2009, 02h01

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

mais cela fonctionnera. Quelque chose comme (pas testé, à adapter

) ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**casawi** · 27/05/2009, 01h34

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 :

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

j'ai fait un alert

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**emmanuel.remy** · 27/05/2009, 01h46

Salut,

Et mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**casawi** · 27/05/2009, 01h50

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

Merci encore

**casawi** · 27/05/2009, 02h02

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

**bigboomshakala** · 27/05/2009, 05h01

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

**le_chomeur** · 27/05/2009, 09h04

tout a fait bbs, il faut initialiser le filtre avant de l'appliquer

( bug ie .... )

onmouseover et onmouseout sous IE

JavaScript

Discussions similaires

Partager

Partager