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