javascript pour rendre les png transparents (ie)

Version imprimable

bonjour,

J ai un problème pour rendre mes images PNG transparentes sous ie6.

Le javascript semble fonctionner, mais il ne rend transparent uniquement la première image qui se trouve dans le code html. Je ne comprend pas pourquoi!

Si quelqu'un a une idéé, merci d'avance
(sachant que je ne suis vraiment pas calé du tout en javascript)

mon html (avec le css) :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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>AEC BOIS - R&eacute;alisations</title>
 
<script type="text/javascript" src="swfobject_source.js"></script>
 
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="fixPNG.js"></script>
<![endif]-->
 
<style type="text/css">
 
		img {
			display:block;
			float:left;
			padding:0;
			margin:0;
		}
 
		#bordureCote {
			width:15px;
			height:940px;
		}
 
		#bordureMilieuBas {
			width:975px;
			height:15px;
		}
 
		#bordureBas {
			height:15px;
			width:100%;
		}
 
		#flashcontent {
			display:block;
			float:none;
			text-align:center;
			height:193px;
			width:975px;
			background-color:#FFFFFF;
		}
		#flashcontent2 {
			display:block;
			text-align:center;
			height:747px;
			width:975px;
			background-color:#FFFFFF;
		}
 
		body {
			background-image:url(../images/elements_de_fond/fond_trame.jpg);
			background-repeat: repeat;
			margin-top: 0px;
		}
 
		.conteneur {
			width:1005px;
			margin-left:auto;
			margin-right:auto;
			text-align:left; 
			height:960px;
		}
 
		.bordGauche {
			display:block;
			float:left;
			height:940px;
			width:15px;
		}
 
		.bordDroit {
			float:left;
			display:block;
			height:940px;
			width:15px;
		}
 
		.partieFlash {
			float:left;
			height:940px;
		}
 
</style>
 
</head>
 
<body>
 
	<div class="conteneur">
 
			<div class="bordGauche">
				<img id="bordureCote" src="../images/elements_de_fond/bord_4.png"/>
			</div>
 
			<div class="partieFlash">
 
				<div id="flashcontent">
					Vous devez autoriser le contenu actif (activation de javascript) pour naviguer sur ce site
				</div>
 
				<script type="text/javascript">
					// <![CDATA[
					var so = new SWFObject("MenuEssaiJS.swf", "menuSup", "975", "193", "8", "#FFFFFF");
					so.addParam("quality", "high");
					so.addVariable("maPage", "2");
					so.write("flashcontent");
					// ]]>
				</script>
 
 
				<div id="flashcontent2">
					partie flash real
				</div>
 
				<script type="text/javascript">
					// <![CDATA[
					var so = new SWFObject("partie_realisations.swf", "PartieReal", "975", "747", "8", "#FFFFFF");
					so.addParam("quality", "high");
					so.addVariable("maPage", "2");
					so.write("flashcontent2");
					// ]]>
				</script>
 
			</div>
 
			<div class="bordDroit">
				<img id="bordureCote" src="../images/elements_de_fond/bord_5.png"/>
			</div>
 
		<div id="bordureBas">
			<img src="../images/elements_de_fond/bord_1.png"/>
			<img id="bordureMilieuBas" src="../images/elements_de_fond/bord_2.png"/>
			<img src="../images/elements_de_fond/bord_3.png"/>		
		</div>
 
 
 
	</div>
 
</body>
</html>

mon css:

mon 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
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

11/12/2007, 09h16
SpaceFrog

Code:

i = i-1

ehu tu ne serais pas entrain de boucler à l'infini ?
11/12/2007, 10h43
éloi_75

ah effectivement!!!

alors j enleve cette ligne?
11/12/2007, 10h45
SpaceFrog

a moins de vouloir continuer à boucler indéfiniment ... :roll:
11/12/2007, 10h52
éloi_75

Snif j suis deçu, j viens d enlever le "i = i-1"
et ca ne change rien

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
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
        var img = document.images[i]
		var newDiv=document.createElement('div');
		var imgName = img.src.toUpperCase()
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
			{
				newDiv.id = (img.id) ? "id='" + img.id + "_pngfix' " : ""
				newDiv.className = (img.className) ? img.className  : ""
				newDiv.title = (img.title) ? img.title: "";
				newDiv.style.cssText='display:inline-block;'+img.style.cssText;
				if (img.align == "left") {newDiv.style.styleFloat= "left"} ;
				if (img.align == "right") {newDiv.style.styleFloat= "right"} ;
				newDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + img.src + "\', sizingMethod='scale')";  
				newDiv.style.zIndex=img.style.zIndex-1;
				if(img.useMap){img.src="SitePics/trsppngfix.gif";}
				img.style.zIndex=newDiv.style.zIndex+1;
				img.parentNode.appendChild(newDiv);
 
 
 
      }
 
 
      }
   }
}

11/12/2007, 11h13
éloi_75

Merci pour ton aide SpaceFrog,
mais je suis pas sur de bien comprendre.
J ai remplacé mon javascript par le tien, mais ca ne marche pas...
11/12/2007, 11h16
SpaceFrog

mets moi un code html avec deux images ... histoire de voir ce que tu essaye de remplacer ...

voila, avec les images de fond sur serveur (marche sans prob sous firefox)

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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>AEC BOIS - R&eacute;alisations</title>
 
<script type="text/javascript" src="http://www.aec-bois.fr/prod/pages/swfobject_source.js"></script>
 
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.aec-bois.fr/prod/pages/fixPNG.js"></script>
<![endif]-->
 
 
 
<style type="text/css">
 
		img {
			display:block;
			float:left;
			padding:0;
			margin:0;
		}
 
		#bordureCote , #bordureCote1 {
			width:15px;
			height:940px;
		}
 
		#bordureMilieuBas {
			width:975px;
			height:15px;
		}
 
		#bordureBas {
			height:15px;
			width:100%;
		}
 
		#flashcontent {
			display:block;
			float:none;
			text-align:center;
			height:193px;
			width:975px;
			background-color:#FFFFFF;
		}
		#flashcontent2 {
			display:block;
			text-align:center;
			height:747px;
			width:975px;
			background-color:#FFFFFF;
		}
 
		body {
			background-image:url(http://www.aec-bois.fr/prod/images/elements_de_fond/fond_trame.jpg);
			background-repeat: repeat;
			margin-top: 0px;
		}
 
		.conteneur {
			width:1005px;
			margin-left:auto;
			margin-right:auto;
			text-align:left; 
			height:960px;
		}
 
		.bordGauche {
			display:block;
			float:left;
			height:940px;
			width:15px;
		}
 
		.bordDroit {
			float:left;
			display:block;
			height:940px;
			width:15px;
		}
 
		.partieFlash {
			float:left;
			height:940px;
		}
 
</style>
 
</head>
 
<body>
 
	<div class="conteneur">
 
			<div class="bordGauche">
				<img id="bordureCote" src="http://www.aec-bois.fr/prod/images/elements_de_fond/bord_4.png"/>
			</div>
 
			<div class="partieFlash">
 
				<div id="flashcontent">
					Vous devez autoriser le contenu actif (activation de javascript) pour naviguer sur ce site
				</div>
 
 
 
 
				<div id="flashcontent2">
					partie flash real
				</div>
 
 
 
			</div>
 
			<div class="bordDroit">
				<img id="bordureCote1" src="http://www.aec-bois.fr/prod/images/elements_de_fond/bord_5.png"/>
			</div>
 
		<div id="bordureBas">
			<img src="http://www.aec-bois.fr/prod/images/elements_de_fond/bord_1.png"/>
			<img id="bordureMilieuBas" src="http://www.aec-bois.fr/prod/images/elements_de_fond/bord_2.png"/>
			<img src="http://www.aec-bois.fr/prod/images/elements_de_fond/bord_3.png"/>		
		</div>
 
 
 
	</div>
 
</body>
</html>

11/12/2007, 11h26
éloi_75

En tout merci bcp de ton aide

Et dire que si IE n existait pas la vie serait plus simple eheh

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
<script type='text/javascript'>
function pngfix(){
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
       var img = document.images[i]
		var newDiv=document.createElement('div');
		var imgName = img.src.toUpperCase()
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
			{
				newDiv.id = (img.id) ? "id='" + img.id + "_pngfix' " : ""
				newDiv.className = (img.className) ? img.className  : ""
				newDiv.title = (img.title) ? img.title: "";
				newDiv.style.height=img.offsetHeight+"px";
				newDiv.style.width=img.offsetWidth+"px";
				newDiv.style.position="absolute";
				newDiv.style.top=img.offsetTop;
				newDiv.style.left=img.offsetLeft;
				if (img.align == "left") {newDiv.style.styleFloat= "left"} ;
				if (img.align == "right") {newDiv.style.styleFloat= "right"} ;
				newDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + img.src + "\', sizingMethod='scale')";  
				newDiv.style.zIndex=img.style.zIndex-1;
              //newDiv.style.display="block"
				//if(img.useMap){img.src="SitePics/trsppngfix.gif";}
				img.style.zIndex=newDiv.style.zIndex+1;
				img.parentNode.appendChild(newDiv);
 
 
      }
 
 
      }
   }
}
 
var collection=document.images.length;
 
for(var j=0; j<collection; j++)
   {alert(j)
   var imgtokill = document.images[0]
    imgtokill.parentNode.removeChild(imgtokill);
 
    }
 
 
}
</script>
<body onload="pngfix();">
<br /><br /><br /><br /><br /><br /><br />
<div id="bordureBas">
			<img src="test.png"/>
			<img id="bordureMilieuBas" src="test.png"/>
			<img src="test.png"/>		
		</div>
</body>
 
</html>

11/12/2007, 12h37
éloi_75

Ah, presque ! !!

a transparence fonctionne, par contre les image se retrouvent collés aux bords superieures haut et gauche de la page...
11/12/2007, 13h42
SpaceFrog

utilise plutot des classNames que classes des balises ...
11/12/2007, 17h39
éloi_75

Ah, mais je sais pas ce que c est les classNames, tu as un tuto la dessus?
11/12/2007, 17h42
SpaceFrog

non je veux dire dasn ton css au lieu d'utilier le

Code:

img {

utilise plutot des classes Nommée

Code:

.monimg{...

et du coup dans la balise tu mets un className
comme ça tu peux attribuer le className au div créé
11/12/2007, 17h44
éloi_75

ah ok, merci, j vais tester ca plus tard...

Par contre avec ton script, meme sous firefox les img n apparaissent plus du tout
12/12/2007, 15h00
éloi_75

Re,

j ai modifié (c est un grand mot!) ton code javascript

Code:

newDiv.style.position="fixed";

au lieu de

Code:

newDiv.style.position="absolute";

Resultat mes images apparaissent bien au bon endroit.
Cela fonctionne parfaitement sauf pour ma div qui contient mes images alignées horizontalement. Elle se retrouve alignées les unes au dessous des autres... après l action du javascript.

As tu une idée?

Merci encore
12/12/2007, 15h23
éloi_75

ok,
c'est bon j ai reussi a me debrouiller...

merci bcp à toi SpaceFrog

:D :D :P :P :king:
13/12/2007, 18h04
éloi_75

c bon j avais un probleme du script pour le swfObject