Script ne s'ouvre pas dans IE

Version imprimable

Bonjour,
J'ai (comme beaucoup de monde) des problèmes avec ce script dans IE:
la page s'ouvre mais le fondu n'apparait pas

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
 
<!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>
	<!-- saved from url=(0013)about:internet -->
	<meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1 />
	<link rel="stylesheet" type="text/css" href="style.css"></link>
		<title>
		Works
		</title>
 
	<script language="Javascript" type="text/javascript">
	function fondu()
	{
	var max = 100;
	var min = 0;
	var opacite=min;
	up=true;
	var IsIE=!!document.all;
	var ThePic=document.getElementById;
	var liste_id = ["CANDELLIER4Thumb", "R1aThumb", "W1Thumb","skThumb", "STUThumb"];
	for (var i = 0, iMax = liste_id.length; i < iMax; ++i) 
	{document.getElementById(liste_id[i]).style.visibility = "visible";}
 
	function fadePic(){		
					if (opacite<max && up){opacite+=2;}
					//if (opacite>min && !up){opacite-=2;}
					//if (opacite>=max){up=false;}
					if (opacite<=min){up=true;}
 
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("CANDELLIER4Thumb").style.opacity=opacite/100;
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("R1aThumb").style.opacity=opacite/100;
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("W1Thumb").style.opacity=opacite/100;
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("skThumb").style.opacity=opacite/100;
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("STUThumb").style.opacity=opacite/100;
	//document.getElementById('result').value=opacite+"%"
	}
	setInterval(function(){fadePic();},100)
	}
 
	</script>
	</head>
<body onload="fondu();"> 
 
<div id= "blocImg">
<div id= "img0">
<a href="works_C.html"><img id="CANDELLIER4Thumb" src="images/img/CANDELLIER4Thumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
<div id ="img1">
<a href="works_R.html"><img id="R1aThumb" src="images/img/R1aThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
<div id ="img2">
<a href="works_W.html"><img id="W1Thumb" src="images/img/W1Thumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a></div>
<div id ="img3">
<a href="works_SK.html"><img id="skThumb" src="images/img/skThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a></div>
<div id ="img4">
<a href="works_ST.html"><img id="STUThumb" src="images/img/STUThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
</div>
 
<div id="blocLeft">
	<div id="titre">WORKS</div>
	<div id="menu">
	<a href="home.html">Home</a><br/>
	<a href="contact.html">Contact</a><br/>
	<a href="cv.html">Cv</a><br/>
	</div>
</div>		
</body>
</html>

Est-ce que qqn peut m'aider svp?

22/12/2010, 10h17
chadoum
La debugbar d'IE bloque sur cette ligne:
Code:

1 2 IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("CANDELLIER4Thumb").style.opacity=opacite/100;
et me dit que ThePic.filters[0] est nul ou n'est pas un objet...
22/12/2010, 11h04
Vil'Coyote

tu es sur quelle version d'ie??
22/12/2010, 11h11
chadoum

IE7
22/12/2010, 14h15
Vil'Coyote
suis pas un expert javascript mais :
Code:

1 2 var ThePic=document.getElementById;
en principe tu déclare l'id de l'élément concerné sinon tu risque pas de le retrouver dans ta page.
22/12/2010, 15h27
franculo_caoulene

Salut,

opacity fait parti de CSS3, il faut donc faire attention en l'utilisant. Il n'est pas pris en compte pour tous les navigateurs antérieur à IE9. Il faut utiliser filter ou -ms-filter pour IE.

Je te conseille de passer par des classes CSS plutôt que des styles en ligne. Le gestion de l'opacité en sera facilité.

Vil'coyotte avait raison. Fallait juste créer une variable ThePic par image et les lancer une par une avec le filters.... Merci!
Par contre je rencontre d'autres problèmes (j'en résous un et un autre apparait), toujours avec IE...
Toujours avec cette page:

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
71
72
73
74
 
<!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>
	<!-- saved from url=(0013)about:internet -->
	<meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1 />
	<link rel="stylesheet" type="text/css" href="style.css"></link>
		<title>
		Works
		</title>
 
	<script type="text/javascript">
	function fondu()
	{
	var max = 100;
	var min = 0;
	var opacite=min;
	up=true;
	var IsIE = !!document.all;
	var ThePic = document.getElementById('CANDELLIER4Thumb');
	var ThePic2 = document.getElementById('R1aThumb');
	var ThePic3 = document.getElementById('W1Thumb');
	var ThePic4 = document.getElementById('skThumb');
	var ThePic5 = document.getElementById('STUThumb');
	var liste_id = ["CANDELLIER4Thumb", "R1aThumb", "W1Thumb","skThumb", "STUThumb"];
	for (var i = 0, iMax = liste_id.length; i < iMax; ++i) 
	{document.getElementById(liste_id[i]).style.visibility = "visible";}
 
	function fadePic(){		
					if (opacite<max && up){opacite+=2;}
					//if (opacite>min && !up){opacite-=2;}
					//if (opacite>=max){up=false;}
					if (opacite<=min){up=true;}
 
	IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("CANDELLIER4Thumb").style.opacity = opacite/100;
	IsIE?ThePic2.filters[0].opacity=opacite:document.getElementById("R1aThumb").style.opacity = opacite/100;
	IsIE?ThePic3.filters[0].opacity=opacite:document.getElementById("W1Thumb").style.opacity = opacite/100;
	IsIE?ThePic4.filters[0].opacity=opacite:document.getElementById("skThumb").style.opacity = opacite/100;
	IsIE?ThePic5.filters[0].opacity=opacite:document.getElementById("STUThumb").style.opacity = opacite/100;
	//document.getElementById('CANDELLIER4Thumb','R1aThumb','W1Thumb','skThumb','STUThumb').value=opacite+"%"
	}
	setInterval(function(){fadePic();},100)
	}
 
	</script>
	</head>
<body onLoad="fondu();"> 
 
<div id= "blocImg">
<div id= "img0">
<a href="works_C.html"><img id="CANDELLIER4Thumb" src="images/img/CANDELLIER4Thumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
<div id ="img1">
<a href="works_R.html"><img id="R1aThumb" src="images/img/R1aThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
<div id ="img2">
<a href="works_W.html"><img id="W1Thumb" src="images/img/W1Thumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a></div>
<div id ="img3">
<a href="works_SK.html"><img id="skThumb" src="images/img/skThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a></div>
<div id ="img4">
<a href="works_ST.html"><img id="STUThumb" src="images/img/STUThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>
</div>
 
<div id="blocLeft">
	<div id="titre">WORKS</div>
	<div id="menu">
	<a href="home.html">Home</a><br/>
	<a href="contact.html">Contact</a><br/>
	<a href="cv.html">Cv</a><br/>
	</div>
</div>	
</body>
</html>

aucun lien ne fonctionne! Cad que je ne peux pas revenir en arrière avec ces lignes-ci:

Code:

1
2
3
<a href="home.html">Home</a><br/>
	<a href="contact.html">Contact</a><br/>
	<a href="cv.html">Cv</a><br/>

et je ne peux pas ouvrir les autres liens non plus! Comme celui-ci par exemple:

Code:

1
2
3
<div id ="img1">
<a href="works_R.html"><img id="R1aThumb" src="images/img/R1aThumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>

Je ne comprends pas!

1 problème résolu, en changeant le doctype:

Code:

1
2
3
4
5
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Je peux maintenant cliquer sur ces liens:
<div id= "img0">
<a href="works_C.html"><img id="CANDELLIER4Thumb" src="images/img/CANDELLIER4Thumb.jpg" alt="Image 1" width=110 height=110 style="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);visibility: hidden;"></img></a>
</div>

mais toujours pas ceux-là:

Code:

<a href="home.html">Home</a><br/>