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

javascript pour rendre les png transparents (ie)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager