javascript pour rendre les png transparents (ie)

**éloi_75** · 10/12/2007, 18h13

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 :

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

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

**SpaceFrog** · 11/12/2007, 09h16

Code :

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

  i = i-1

ehu tu ne serais pas entrain de boucler à l'infini ?

**éloi_75** · 11/12/2007, 10h43

ah effectivement!!!

alors j enleve cette ligne?

**SpaceFrog** · 11/12/2007, 10h45

a moins de vouloir continuer à boucler indéfiniment ...

**éloi_75** · 11/12/2007, 10h52

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

**SpaceFrog** · 11/12/2007, 11h08

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
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);
 
 
 
      }
 
 
      }
   }
}

**éloi_75** · 11/12/2007, 11h13

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

**SpaceFrog** · 11/12/2007, 11h16

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

**éloi_75** · 11/12/2007, 11h24

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

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

**éloi_75** · 11/12/2007, 11h26

En tout merci bcp de ton aide

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

**SpaceFrog** · 11/12/2007, 11h57

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

**éloi_75** · 11/12/2007, 12h37

Ah, presque ! !!

a transparence fonctionne, par contre les image se retrouvent collés aux bords superieures haut et gauche de la page...

**SpaceFrog** · 11/12/2007, 13h42

utilise plutot des classNames que classes des balises ...

**éloi_75** · 11/12/2007, 17h39

Ah, mais je sais pas ce que c est les classNames, tu as un tuto la dessus?

**SpaceFrog** · 11/12/2007, 17h42

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

Code :

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

img {

utilise plutot des classes Nommée

Code :

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

.monimg{...

et du coup dans la balise tu mets un className
comme ça tu peux attribuer le className au div créé

**éloi_75** · 11/12/2007, 17h44

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

Par contre avec ton script, meme sous firefox les img n apparaissent plus du tout

**éloi_75** · 12/12/2007, 15h00

Re,

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

Code :

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

newDiv.style.position="fixed";

au lieu de

Code :

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

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

**éloi_75** · 12/12/2007, 15h23

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

merci bcp à toi SpaceFrog

**éloi_75** · 13/12/2007, 18h04

c bon j avais un probleme du script pour le swfObject

javascript pour rendre les png transparents (ie)

JavaScript

Discussions similaires

Partager

Partager