Des PNG transparents sous IE6 avec du CSS

Tutoriels HTML/CSS

Voici une nouvelle méthode pour rendre les PNG transparents sous Internet Explorer 6 mais cette fois-ci uniquement dans une feuille CSS !

Publié il y a déjà trop longtemps…

La méthode consiste à utiliser la propriété CSS de Microsoft expression. Celle-ci n’est bien sûr pas standard mais elle permet à Internet Explorer d’executer du pseudo-Javascript.

Voici donc le petit code :

* html img, * html .png{ behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true) ); }

Ce code va ainsi chercher toutes les images PNG et les remplacer par le filtre AlphaImageLoader de Microsoft. Et pour les PNG en background il suffit d’ajouter la classe CSS .png.

Malheureusement, le script ne fonctionne pas si le Javascript est désactivé.

Via Komodomedia.

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

zincou

background:url(../images/home_plus/bg_teaser1.png) top left no-repeat;
_background:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/home_plus/bg_teaser1.png’, sizingMethod=’crop’);

C’est pas mal non plus :)

Shemu

Of course ! Mais l’intérêt d’un tel script et justement d’éviter de te farcir ce CSS à chaque png.

jparia

Merci mais j’utilise plus les png, beaucoup de monde ont eu des problème d’affichage sous IE suite à un bug lié à Quicktime…
un bon gif transparent ou un jpeg pour les photos avec les effets MS et le tour est joué
Clemens

Voilà un truc qui est très utile ! Mais le mieux serais quand même que Microsoft prenne une bonne fois pour toute le support du PNG !
Damdam

heu… excusez-moi.
D’abord, bonjour à tous et merci Shemu pour ce site qui est pour le pauvre néophyte que je suis d’une aide précieuse.
De fait, ce code, génial !!!… mais je le mets où ??? Dans la partie "head" de ma page ??? ou non ???
Bref, comme vous le voyez, néophyte, néophyte… D’avance merci.
Damdam

Au temps pour moi pour le dernier message, le code se met dans une feuille de style (apprends à lire Damdam) !
Benoit

Salut, je vais faire mon boulet :S, mais ton code est différent de ta source, et ne fonctionne pas :( contrairement a celui de Komodomedia. J’ai raté un truc ou je suis pas tres bon?
Merci, Benoit

Shemu

Effectivement, je crois qu’il y a eu un petit correctif. Ce qui est curieux c’est que j’ai testé le code avant et ça marchait… Enfin bon, c’est pas grave, j’ai actualisé le code dans le billet. Merci pour l’info.

Dano

Salut à vous !

J’ai essayé votre code mais ça ne fonctionne pas… voilà mon code :

#header {
height:267px;
background: url(‘img/header.png’) no-repeat left;
# behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = "none",
# this.runtimeStyle.filter = "src=’" + this.src + "’, )",
# this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url"’, »(‘")’, »),
# this.runtimeStyle.filter = "src=’" + this.origBg + "’, )",
# this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
# );
}

J’ai raté un truc? il faut changer quelque chose?
Le CSS ne se charge pas :s

Merci de votre aide

Shemu

Tu appliques sur #header, or ce filtre ne fonctionnne que sur les images donc #header img {}.

Sunny

Il me semble que pour ce genre de script, il faut définir aussi dans les pages la taille des images png dans le html…
<img src="taphoto.png" width="XXX" height="YYY">

A confirmer :)
globule

Je ne sais pas de quand date cet article (pas d’année) et ses commentaires mais il existe de nombreuses librairies JS qui font ça très bien toutes seules…
Il suffit de les télécharger dans le HEAD et hop, ça marche!

Shemu

Bien sûr, il s’agit juste d’une autre méthode.

web2h

L’astuce marche à merveille, le rendu graphique est nickel.
mais le rendu ergonomique a quelques ratés chez moi.

en effet, sous IE, si je met des liens hypertextes dans la div dont le background est transparent et est affiché suite à l’astuce; ceux-ci sont inactifs, je n’ai aucun moyen de cliquer de dessus ou de sélectionner du texte.
Sous firefox, aucun souci.

Y’a t’il moyen de contourner ce problème sans avoir à créer 2 divs qui se superposeraient (une avec le background et une avec le contenu – les liens) ce qui implique de fixer la hauteur ce que je ne peux pas me permettre.

merci d’avance

Shemu

Il suffit de mettre les liens en position relative. Dans la plupart des cas, ça marche.

Les commentaires sont clos.