Discussion :

[Torpedox]

Bonjour,

J'ai crée des PNG transparents sous Gimp 2.2 (linux) mais sous Internet Explorer 6 sous Windows ils ne sont pas transparent (soit un fond noir soit un fond blanc) alors qu'ils le sont partout ailleurs :
Mozilla 1.7 Win/Linux OK
Ie 5 Mac Os OK
Safari Mac Os OK
IE6 Windows : NON

Comment faire pour créer des PNG transparents qui fonctionnent sous IE6 ? Y'a t'il des options particulières à mettre ? (j'iai bel et bien activé la transparence lors de l'enregistrement !)

Merci de votre aide.

[gorgonite]

La question serait plutôt IE gère-t-il correctement le PNG ???

une solution, mais gare à la désactivation du js

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
<script language="JavaScript" type="text/JavaScript">
 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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
      }
      }
   }
window.attachEvent("onload", correctPNG);
</script>

ou alors utiliser du png 8, mais ça revient à faire du gif


ps: je n'ai eu qu'à chercher sur et c'est dans les premiers liens trouvés

[Locelot]

IE ne gère pas les PNG. Il ne gère pas non plus très bien le CSS 2, le (X)HTML et j'en passe
Me demande ce qui peut motiver les gens sous windob à utiliser IE -_-
Si je me rappelle bien, IE6 n'a pas été mis à jour sérieusement depuis 2001.

J'ai moi aussi été aussi confronté à ce problème et en cherchant des solutions, je n'ai trouvé que des scripts longs et compliqués... comme ci-dessus.
J'ai donc créé un script JavaScript assez simple qui ne pose apparemment pas de problème. Le voici:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript"><!--
  //<!&#91;CDATA&#91;
    if &#40;navigator.appName.substring&#40;0, 3&#41; == "Mic"&#41;
      for &#40;i = 0; i < document.images.length; i++&#41;
        if &#40;document.images&#91;i&#93;.src.substring&#40;document.images&#91;i&#93;.src.length-3, document.images&#91;i&#93;.src.length&#41; == "png"&#41; 
        &#123;
          document.images&#91;i&#93;.style.height = document.images&#91;i&#93;.height + "px";
          document.images&#91;i&#93;.style.width = document.images&#91;i&#93;.width + "px";
          document.images&#91;i&#93;.style.filter = "progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;src=" + document.images&#91;i&#93;.src + ",sizingMethod='scale'&#41;";
          document.images&#91;i&#93;.src = "transparent.gif";
        &#125;
  //&#93;&#93;>
  //--></script>

Le fichier "transparent.gif" est obligatoire. En réalité, c'est une image gif qui n'est autre qu'un pixel transparent.
Pour que cela fonctionne, il faut aussi spécifier pour chaque image l'attribut width et height.

[rekiem71]

Bonjour,

j'ai aussi ce problème et ton script m'interesse.

Je ne suis pas un pro... où je dois mettre le script ? dans ma page html contenant l'image ?

Et le fichier transparent.gif, j'en créé 1 vide avec photoshop ? je créer juste un fichier en brut et je le renomme transparent.gif ?
Concernant mes images PNG, je dois leur donner un nom particulier ?

merci encore

[prome]

Tu dois mettre ce script entre les balises <head> et </head> de ta page HTML

[SpaceFrog]

Je croyais avoir résolu mon souci avec ce code mais c'était compter sasn le map associé ... il n'est plus actif sous IE après le filter ???

[SpaceFrog]

Bon alors pour ceux que ça intéresse ...


j'ai collé provisoirement une rustine :

Code :

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

   var useMap= (img.usemap)? "usemap='" + img.usemap +"' " : "";

.

je pense qu'il faudrait faire une boucle for in avec un switch pour passer en revue toutes les propriétés ...

[SpaceFrog]

Argg...
en fait ça ne resoud en rien mon problème ...

il faut arriver à modifier le src de l'image de départ pour le remplacer par un gif entièrement transparent ...

[karimphp]

le premier code est tres efficace mais ne s'applique pas sur les images en background

[vovor]

De plus il faut ajouter que les utilisateurs passent progressivement à IE-7, qui gere enfin la transparence PNG... voir meme la transparence alpha (les images semies tansparentes, tres pratique pour creer un voile legerement transparent entre son fond et son texte).
Donc il faudrait ajouter dans le script de verifier la version de IE. Sert à rien de le lancer pour les utilisateurs de IE-7.

[zwaldo]

Aller un petit hack :

Code :

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

1
2
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mon_image.png',sizingMethod='scale')"> </div>

Bien evidement si vous souhaitez avior 2 feuilles de style vous pouvez mettre dans votre header :

Code :

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

1
2
3
4
<!--[if lte IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Avec la declaration du style ci dessus dans le fichier ie6.css

Attention ceci ne fonctionne correctement qu'avec les petites images, et n'est pas fait pour les fond de pages
enjoy

[Nooka]

Personnellement j'ai adopté ce script. Il gère très bien la transparence des PNG sous IE6. Il est aussi sensé gérer les Map mais là ça coince chez moi...

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

Correctly handle PNG transparency in Win IE 5.5 and 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2005.

Use in <HEAD> section with DEFER keyword
wrapped in conditional comments thus: 

    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix_map.js"></script>
    <![endif]-->

This extended version includes imagemap and input image functionality.
It also requires a 1px transparent GIF.
 
*/
var strGif = "transparentpixel.gif"
var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
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
		  if (img.useMap)
		  {  
			 strAddMap = "<img style=\"position:relative; left:-" + img.width + "px;"
			 + "height:" + img.height + "px;width:" + img.width +"\" "
			 + "src=\"" + strGif + "\" usemap=\"" + img.useMap 
			 + "\" border=\"" + img.border + "\">"
		  }
		  var strNewHTML = "<span " + imgID + imgClass + imgTitle
		  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		  + "filter:" + strFilter
		  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		  if (img.useMap) strNewHTML += strAddMap
		  img.outerHTML = strNewHTML
		  i = i-1
	   }
	}

   for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))
}

function findImgInputs(oParent)
{
   var oChildren = oParent.children
   if (oChildren)
   {
      for (var i=0; i < oChildren.length; i++ )
      {
         var oChild = oChildren(i)
         if ((oChild.type == 'image') && (oChild.src))
         {
             var origSrc = oChild.src
             oChild.src = strGif
             oChild.style.filter = strFilter + "(src='" + origSrc + "')"
         }
         findImgInputs(oChild)
      }
   }
}

[SimMaster]

Spip utilise win_png.htc, qui fonctionne très bien