2007
Posté dans 
Opéra et FireFox gèrent parfaitement la transparence des fichiers PNG. Seulement il reste Internet Explorer qui a bien du mal y parvenir. Il existe heureusement des hacks pour que vos créations soient retranscritent à la perfection sous ce dernier navigateur Web. Je vous propose une liste de différents hacks et leurs inconvénients :
La première solution est l’appel à un script en JavaScript :
- Téléchargez la routine JavaScript ici
- Ajoutez dans le <head> de votre site ce code :
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Le problème est que cette méthode ne marche pas si vous désirez intégrer un PNG transparent dans le fichier CSS via la propriété background-image…
La seconde solution fait appel la fonction de transparence de DirectX (rien que ça!) et permet de palier ce problème :
- Intégrez ce code dans votre fichier CSS dans la partie désirée :
background-image:url(votre_fichier.png)!important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='votre_fichier.png'); - Attention, si vous voulez que l’image se répete via la propriété repeat, intégrez ce code :
background-image:url(fichier.png)!important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod='scale', src='images/fichier.png');
background-repeat:repeat-y; - De plus, si vous désirer ajouter un lien sur du texte se trouvant dans un bloc dont le style contient une image de fond (background-img), intégrez ce code :
a, input{position: relative;z-index: 1;}
Le problème de cette méthode est l’appel même des routines DirectX qui font ralentir le site.
Alors voici la solution utlime qui provient de twinhelix:
- Téléchargez l’archive ici
- Ajoutez ce code à votre CSS :
img { behavior: url(iepngfix.htc); } - Voici d’autres exemples d’application :
#header { background:url(header.png); }
img, #header { behavior: url(iepngfix.htc); }
img, #header, .class, blockquote { behavior: url(iepngfix.htc); }
* { behavior: url(iepngfix.htc); }
D’un ordre général, évitez le plus possible d’utiliser le format png et préférez dans la mesure du possible le gif (mais gardez en tête qu’il ne gère qu’un seul niveau de transparence), vous ne vous en porterez que mieux 
Et si vous connaissez d’autres hacks PNG n’hésitez pas à nous les faire partager!
Prenez un café et consultez les articles traitant du même sujet
Ajoutez cet article à votre Bookmark favoris
Bonjour,
J’ai mis le code mentionné ci-dessus pour afficher la transparence mais rien ne fonctionne sous IE ? Je ne comprends pas…
Bonjour Casey,
Voici quelques pistes :
- assure-toi de bien avoir téléchargé l’archive proposée.
- assure-toi que tu as bien le code “img { behavior: url(iepngfix.htc); }” dans ton fichier css
- assure-toi que le chemin dans lequel se trouve l’archive proposée est bien le même que celui que tu as dans “img { behavior: url(CHEMIN/iepngfix.htc); }”
Voilà, si malgré celà ca ne marche toujours pas, indique nous l’adresse de ton site pour voir ce qui cloche…
Bonjour,
J’ai essayé pleins de scripts ainsi que filter:prodig ne fonctionne pas ! avec filter prodig le fond transparent qui est en fait un fond rose opaque disparait dans les deux navigateurs. Le fichier archive je ne sais pas comment le descendre ? et je sais plus quoi mettre meme le gif que tu dis ce n’est pas possible de le mettre en transparence 1 couleur ou en tout cas je ne sais pas comment faire ?
Merci
Pour moi cela marche mieux avec le “sizing methode” mis sur “crop” (d’autres conseil de le mettre sur “scale”)..
Attention au chemin des images !
-> “background-image” load les images a partir de la feuille de style
-> “AlphaImageLoader” charge les images a partir de la page
.mainHeadBg4 {
background-image:url(../images/images/main1_head4.png)!important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=’images/images/main1_head4.png’,sizingMethod=’crop’);
}
Bon layers !
Merci pour ces informations Molokoloco
Il n’y a pas de trackback sur ton site
Voici mon récapitulatif :
http://blog.lablonde.fr/news/86-recapitulatif-des-methodes-d-affichage-des-images-au-format-png-avec-transparence-sur-internet-explorer.html
Je prends note La Blonde
Je vais rajouter les trackbacks, je compte également ajouter un blogroll et un moteur de recherche
OIUi, j’oubliais… moi aussi j’utilise un JS pour faire cela.. mais il comporte deux inconvénient : Ne foncitonne pas pour les image en background, requiere que la taille des images soit bien définie pour les images a remplacer..
Voili voilu +++
___________________________________
// Necessite la librairie prototype.js…
___________________________________
var browser = ”;
var client = { // Testé FF/IE
browser: function() {
if (isSet(browser)) return browser;
var userAgentStr = navigator.userAgent.toLowerCase();
var browsers = new Array(’opera’,’safari’,'firefox’,'gecko’,'camino’,'konqueror’,'applewebkit’,'msie 7′,’msie 6′,’msie 5′,’msie 4′,’msie 3′,’mozilla’);
for (var index = 0, len = browsers.length; index 0; i–) {
s = string.substring(i, i+1);
if (s == ‘.’) return string.substring(i+1, string.length);
}
};
___________________________________
// ————————- FIX PNG ———————————- //
// Attention toutes les images en PNG doivent avoir une taille specifie
var fixIePng = function(evt) {
if (evt) Event.stop(evt);
$$(’img’).each( function(e) {
var img = $(e);
var imgSrc = img.src;
if (getExt(imgSrc).toLowerCase() == ‘png’) {
img.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+imgSrc+”‘, sizingMethod=’scale’);”;
img.src = ‘images/pix.gif’;
}
});
};
var detectedBrowser = client.browser();
if (detectedBrowser == ‘msie 6′ || detectedBrowser == ‘msieOld’) Event.observe(window,’load’,fixPng,false);
Bonjour,
J’aimerai savoir si on peut en javascript modifier une couleur png.
Je m’explique, j’ai une png transparent (fond blanc et image transparente) je lui applique une couleur dynamiquement :
function changeimage(couleur1) { document.getElementById(”visuelprincipal5″).style.backgroundColor=couleur1;
}
Le problème c’est que mon fond reste toujours blanc. Comment faire pour le changer dynamiquement comme mon image transparente.
Merci
Bonjour Atazia,
Il me semble qu’on puisse modifier la couleur d’un block via sa propriété back-ground-color en javascript (je pense notamment aux outils tels que colorpicker). Donc si tu as une image avec des zones transparentes et que tu l’affiche dans un block dont la couleur de fond change, ça marchera.
en revanche, il n’est pas possible de modifier les couleurs d’une image directement en javascript (ou alors que celui qui sait le faire me jette la première pierre :p )
Bonne continuation à toi en tout cas
Hello,
Il faudrait voir un exemple plus complet de ton code, mais je pense que tu dois mettre l’image dans une div et changer plutot le background de la div à la place de celui de l’image… A priori ca doit bien marcher !
Tout à fait d’accord avec toi molokoloco. Quand je parlais de block, j’parlais d’un div avec un display:block; dessus
Salut à tous,
Bon j’ai testé le iepngfix.htc et donc mes images png s’affiche avec le fond alpha mais “en décaissé” et surtout avec une croix rouge comme s’il ne trouvé pas l’image.
Qui peux me dire ou j’ai merdé?
Merci @+
Ps: en des termes comprehensible pour un noob
Salut Dieu, heureux que Dieu pose des questions sur mon blog
Je ne vois pas ce que tu veux dire par “décaissé”… tu peux expliquer autrement s’il te plait?
De plus, je suis tombé sur un petit JS super sympa, ca se passe ici http://www.photoshoplab.com/fun-with-transparent-png-images.html
Bonjour a tous, je répond à la place de Dieu parce que j’obtiens la même chose que lui sous IE6 : c’est a dire une image transparente (youpi), avec un cadre autour de l’image (qui donne effectivement un effet “décaissé”/incrustation.
Comme une image qui ne s’affiche pas quand on travaille sous FireFox si tu préfères (+ la petite croix rouge et le texte de la balise alt.
Voila…Si ça peut aider
Hello,
J’ai eu le meme probleme (”décaissement”, croix rouge sous IE 6.0)
Avec la solution .htc, vous avez besoin de 2 fichiers (présents dans l’archive que vous avez téléchargée)
- iepngfix.htc
- blank.gif
Donc assurez-vous d’avoir repris cette image et corrigez au besoin le chemin pour y accéder (au debut du fichier iepngfix.htc).
merci beaucoup à maguiland pour le rappel sur le blank.gif, j’étais sur le point de m’arracher les cheveux!
Merci pour le truc des images PNG en background de style CSS, pour que ça marche à la fois sous IE et sous Gecko. Ca a marché tout de suite et m’a sauvé la mise.
Ca marche du tonnerre ce iepngfix de twinhelix ! Léger, efficace … Merci pour l’info, et spécialement l’astuce ultime :
a, input{position: relative;z-index: 1;}
qui fonctionne aussi avec iepngfix pour faire apparaître les liens et zone texte au-dessus du png sans aucun bug
super tuto !