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.

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.