Script ne s'ouvre pas dans IE [Résolu]

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

22/12/2010, 15h27	#6
franculo_caoulene Expert Confirmé Inscription : octobre 2003 Messages : 2 886 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 2 886 Points : 2 559 Points : 2 559	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é. __________________ Penser à la recherche et au bouton
	00

22/12/2010, 11h04	#3
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	tu es sur quelle version d'ie??
	00

22/12/2010, 11h11	#4
chadoum Invité régulier Inscription : novembre 2010 Messages : 34 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 34 Points : 7 Points : 7	IE7
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email