[Webmaster] Afficher des PNG transparents dans IE 5.5 et IE 6
Publié par sebsauvage, dernière mise à jour lun. 20 nov. 2006 à 13:57:45 par sebsauvage
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.)
http://homepage.ntlworld.com/bobosola/index.htm
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.