Les PNG transparents sous Internet Explorer 6
Les personnes développant des sites Web avec des images transparentes au format PNG ont déjà rencontré ce problème.
En effet, sous Internet Explorer[1] les images transparentes au format PNG ne s’affichent pas correctement. La partie de l’image qui devrait être transparente est grise. Si le fond est du même gris, cela ne pose pas de problème. Mais malheureusement, c’est rarement le cas.
Aurélien Catinon présente sur son weblogue une solution qu’il a trouvé sur ce site.
Sommaire
La solution
Pour résoudre ce problème, il suffit d’insérer un bout de code JavaScript. Deux méthodes sont possibles selon la façon utilisée pour afficher l’image.
Les images provenant du tag <img>
Pour cela, il faut intégrer ce fichier JavaScript. Puis, le code suivant doit être ajouté dans les pages HTML[2].
<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->
Les images provenant d’une feuille CSS
Il faut remplacer ces propriétés :
background-image: url("image.png");
Par celles-ci :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='image.png'); background-image: none;
Résultat
Cette astuce a été utilisée pour le site Debian Addict. Les trois images en haut à droite sont des PNG avec un fond transparent.
Notes
[1] Par exemple avec IE6.
[2] Notez l’utilisation d’un quirks mode pour les commentaires conditionnels.
https://blog.lecacheur.com/2006/02/02/les-png-transparents-sous-internet-explorer-6/DéveloppementLes personnes développant des sites Web avec des images transparentes au format PNG ont déjà rencontré ce problème. En effet, sous Internet Explorer les images transparentes au format PNG ne s'affichent pas correctement. La partie de l'image qui devrait être transparente est grise. Si le fond est du même gris,...SeBSébastien LECACHEUR23r0@laposte.netAdministratorLe weblogue de SeB
Sympa comme astuce, peut-être avait vous une solution pour un background-repeat en png (pour une ombre sur une image de fond…Merci
As-tu un exemple du problème ? Car je ne vois pas trop le problème du background-repeat en PNG…
Pour reprendre le problème de Maxime, moi non plus je n’arrive pas à faire de repeat sur le background. L’image s’affiche une fois, point barre.
Céline,
Je ne comprends toujours pas le problème. As-tu un exemple stp ?
Merci,
Ben non pour le coup c’était super étrange, mon image faisait 2px de hauteur, mais IE6 requiert un minimum de hauteur pour l’afficher. En faisant une image plus grande j’ai résolu le problème ^^,
En espérant que cela puisse aider d’autre personnes.
D’accord. Merci pour l’information en tout cas.
Bonjour,
Voici une solution facile que j’utilise et qui évite au navigateur :
1. de tester toutes les images de la page
2. de mal afficher les images pendant le chargement de la page et l’exécution d’un script global
3. qui économise au maximum mémoire et cpu
// Correctif de l'affichage des images PNG dans IE5.5 et IE6 (transparent pour les autres navigateurs).
// V1.1 par Brice de Villeneuve, http://www.boursica.com/
// Licence : freeware, librement utilisable du moment que vous laissez ces commentaires dans votre source.
// Mettre ce script dans le head et dans les balises IMG ajouter simplement : onload='setpng(this)'
// Si l'image n'est pas visible (display:none par exemple), appeler la fonction juste après l'affichage de l'image
// dans un javascript avec, par exemple, un setpng(document.getElementById('idDeMonImage');
function setpng(img) { if(document.all && (IEver=parseFloat(navigator.appVersion.split("MSIE")[1])) && (IEver>=5.5) && (IEver";
}}
Blabla blabla
Blabla blabla
Blabla blabla
Mieux qu’un long discours…
http://www.radium.fr/png.htm
Merlin666, merci pour ce script. Le script que tu proposes fait la même chose que celui présenté plus haut.
La seule différence avec le script que tu proposes, c’est que pour chaque images présentes dans une page, il faut ajouter un bout de code Javascript. Alors que le script que j’ai utilisé fait celà dynamiquement. Ceci explique les différences de comportement et de performance. 😉
Chacun choisira en fonction de ses contraintes. Je pense notamment aux cas où l’on n’a pas la maîtrise du code HTML généré.
Le script du haut ne semble pas fonctionner avec mon IE6, les png de http://www.debianaddict.org/ apparaissent pour moi encore sur fond gris.
Jul, tu as raison. Il y a dû y avoir une régression sur le site Debian Addict lors de la dernière mise à jour. Je vais vérifier celà.
Merci beaucoup d’avoir signalé le problème !
bonjour,
je ne comprends pas, chez moi, ces astuces ne fonctionnent tout simplement pas : j’ai soit encore les fonds gris (comme sur Debian Addict), soit rien du tout (l’image ne s’affiche pas…)
je précise que dans mon cas, le pb vient des CSS : je n’appelle pas les images en direct.
je dois faire quelque chose de travers, mais je ne vois pas quoi 🙁
al1
Bonjour.
Ca ne marche pas chez moi non plus.
Mais… j’ai trouvé une solution simple pour éliminer le problème : changer le mode de représentation des couleurs de « RVB » à « indexé ».
Ca prend 15 secondes avec GIMP (par exemple), et ça marche nickel.
Patrick
Alain,
A priori, j’ai une regression sur mes scripts. Je dois regarder d’où vient le problème. Mais je n’ai pas encore pris le temps de le faire… 🙁
Patrick,
Merci pour ton astuce qui semble intéressante ! Je vais essayer de la tester.
Bravo à Patrick Duc, excellente suggestion!!
On monte en poids d’image, mais ça fonctionne parfaitement sous IE6. Moins bien sous ie 5.5.
ca ne marche plus sur moi !!
Le script avait été effacé sur Debian Addict. Je viens de le remettre et ça refonctionne. 🙂