Contactez-nous

1

Afficher du PNG 24 dans MSIE

28 février 2006
par ARNO*

[SPIP 1.8] Il est possible de faire afficher des images au format PNG 24 à MSIE, et cela en respectant la transparence (couche alpha). Pour réaliser cela, on applique un comportement (behavior), système propre à Microsoft Explorer, à une feuille de style.

Cela est indispensable, au passage, pour afficher correctement :
— les images typographiques,
— les images passées par certains filtres graphiques de SPIP qui fabriquent de la transparence en PNG 24,
— les fichiers GIF transparents réduits par GD 2 (dans la version 1.9 de SPIP, les images réduites ayant une source transparente sont systématiquement transformées en PNG 24, pour éviter la pixellisation du détourage).

Il suffit, dans son squelette, d’appeler le comportement win_png.htc (fourni, depuis la version 1.8, à la racine de SPIP) :

Si l’on préfère, plutôt que de l’afficher sélectivement à certaines classes, on peut l’appliquer à la balise img dans son ensemble.

Si les images sont surmontées, dans MSIE, du symbole de l’image manquante, c’est que le fichier rien.gif est absent.

N.B. Dans MSIE, la page est chargée avec ses images, puis le comportement s’applique : ainsi, pendant le chargement, la transparence de la couche alpha n’est pas respectée (on voit l’image PNG 24 telle que MSIE l’affiche habituellement, c’est-à-dire très laide) et ensuite seulement la transparence s’applique.

N.B.2. Il ne faut jamais s’étonner de rien avec MSIE : si vous commencez à manipuler des éléments ayant une transparence et à les animer, masquer/dévoiler, avec Javascript, vous finirez forcément par rencontrer des bugs d’affichage de ce côté, avec des éléments qui disparaissent totalement. En règle générale, les animations Javascript (DHTML) et la transparence ne font pas très bon ménage dans MSIE et il faut débugguer longtemps (et, souvent, réduire ses ambitions graphiques).

N.B.3. Initialement, ce petit morceau de code a été intégré à SPIP pour permettre l’affichage des PNG 24 de l’espace privé !

[SPIP 1.9.2] Attention : dans les nouvelles versions de SPIP, la méthode décrite ci-dessous n’est plus nécessaire. Un petit script directement intégré à SPIP déclenche la mise en transparence des PNG 24 sous MSIE sans qu’il soit nécessaire, pour le webmestre, de faire quoi que ce soit.

Pour être certain d’activer ce script dans ses squelettes personnels, il faut cependant bien penser à insérer le raccourci #INSERT_HEAD dans le header du HTML de ses squelettes.

  • cy_altern
    Mai 2006

    Peut être faudrait il préciser qu’il est nécessaire d’indiquer explicitement la largeur et la hauteur (width et height) de l’image sur laquelle on applique cette propriété de style ? (sinon l’image prend la taille de rien.gif, cad 24 x 24 pixels)

  • Franz
    Juin 2006

    Salut,

    • J’ai veillé à ce que les attribut width et height soient présents dans les images concernées
    • J’ai veillé à ne pas faire de liens absolus
    • J’ai même appelé le truc directement dans la page et pas dans une css séparée pour être sûr
    • J’ai veillé à ne pas attribuer plus d’une classe css à chaque image
    • ...

    et ça ne marche pas :(

  • Valery
    Juillet 2006

    Hello,

    J’ai repris texto les styles en question et ça a fonctionné du premier coup merci !

  • Edouard
    Juillet 2006

    bonjour Arno. Est-ce que c’est normal que cela ne marche pas pour mon background ?

    j’ai copié/collé en haut de mon habillage.css ce que tu as mis...

    et j’ai laissé le win_png.htc à sa place originale...

    Je suppose que c’est moi le problème :p héhé...

    edouard

  • amaury
    Septembre 2006

    Salut,

    j’utilise SPIP 1.9.1 et ce serait plutôt dans la définition des classes CSS :

    .spip_logos (avec un S)

  • alain
    Septembre 2006

    Après avoir appliqué ce filtre il n’est plus possible de redimensionner l’image. Il y a une solution ?

  • erational
    Octobre 2006

    salut,

    le seul inconvénient de cette technique est que la CSS ne se valide plus car l’élément behavior n’est pas reconnu par le W3c

    la bidouille que j’ai trouvé est d’ajouter dans le head, un appel aux fonctions non standards de MSIE dans une feuille séparée

    <!--[if lte IE 6]>  
     <link rel="stylesheet" href="skel/css/layout_ie.css" type="text/css" />
     <![endif]-->

    le "lte IE 6" signifie "s’applique à toutes les versions de MSIE <= 6". Car il me semble que MSIE 7 gère maintenant bien le PNG 24.

    De cette façon, on valide la page (XHTML et CSS) et la transparence passe partout.

  • Arno
    Juillet 2007

    Bonjour à tous, Cette solution fonctionne-t-elle avec les fonctions "repeat", comme background-repeat par exemple ?!

    Cdt.Arno

  • sauvy
    Décembre 2007

    Bonjour,

    Où dois-je mettre : .img_png, .image_typo, .spip_logo behavior : url("win_png.htc") ;

    Sans les styles ?

    Car dans mon squelette ça marche pas...

    Merci

  • fred
    Mars 2008
    .img_png, .image_typo, .spip_logos {
            behavior: url("win_png.htc");
    }

    > le bon code à copier (il manque un "s" à spip_logo Arno, j’ai passé une demi-heure à comprendre...

  • grafx
    Février 2009

    est ce que ça marche pour une image qui est appelée par la css, dans un #style background:url(mon_image.png) ; ? dois je mettre un behavior dans #style ? car ce que tu expliques ne fonctionne que pour une image qui est dans une balise et que je defini dans css...

    merci

  • talock
    Février 2009

    tu ajoute sa aprè la ligne background et sa marche : filter : progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’../images/picto-maison.png’, sizingMethod=’scale’) ;

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.