Webmaster - Afficher des PNG transparents dans IE 5.5 et IE 6

Le problème

Les PNG transparents permettent de faire de très beaux effets sur les pages web.
Tous les navigateurs le supportent (Firefox, Opera, Konqueror, Safari, Camino...)... sauf Internet Explorer 5.5 et 6 !
(Internet Explorer 7, lui, supporte correctement les PNG transparents).

C'est donc particulièrement pénible, puisque cela vous oblige:

• Soit à ne pas utiliser de PNG transparents.
• Soit à gérer 2 versions de la page (pour IE 5.5/6, et pour tous les autres).

La solution

Voici un bout de Javascript (2 ko) qui permet à IE 5.5 et IE 6 de gérer correctement les PNG transparents.
(Oui oui, vous avez bien lu.)

Le gros du travail consiste à mettre ce bout de Javascript sur votre site: pngfis.js

puis à ajouter dans vos pages:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

C'est tout !

Attention: Il est nécessaire d'indiquer la taille des PNG transparents (width et height) dans chaque balise <img>.

Ceci ne causera pas la moindre perturbation dans les autres navigateurs et ne cassera pas la validation W3C. Seuls IE 5.5 et IE 6 utiliseront ce bout de code automatiquement.

Note: Il n'y a aucune solution pour les version de IE antérieures à la 5.5.

Comment ça marche ?

Le bout de javascript n'est exécuté que par IE 5.5 et IE 6.
Il fait appel à DirectX pour charger et afficher les PNG. Ce document intitulé « Webmaster - Afficher des PNG transparents dans IE 5.5 et IE 6 » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.