Script ne s'ouvre pas dans IE

**chadoum** · 21/12/2010, 19h15

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 :

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
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?

**chadoum** · 22/12/2010, 10h17

La debugbar d'IE bloque sur cette ligne:

Code :

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

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...

**Vil'Coyote** · 22/12/2010, 11h04

tu es sur quelle version d'ie??

**chadoum** · 22/12/2010, 11h11

IE7

**Vil'Coyote** · 22/12/2010, 14h15

suis pas un expert javascript mais :

Code :

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

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.

**franculo_caoulene** · 22/12/2010, 15h27

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é.

**chadoum** · 23/12/2010, 11h07

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 :

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
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 html :

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

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 html :

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

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!

**chadoum** · 23/12/2010, 12h39

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

Code html :

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

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 html :

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

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

Script ne s'ouvre pas dans IE

JavaScript

Discussions similaires

Partager

Partager