Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Des PNG transparents sous IE6 avec du CSS

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

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.


Ce que nos lecteurs en disent :

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

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

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

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

  5. Damdam

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

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

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

  8. 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 :)

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

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