Partagez winpix...

Facebook Twitter Google Delicious RSS

Des images PNG transparentes sous IE 6

Posté le 18 mars 2010 par winpix

Le format d'image PNG (Portable Network Graphic) est optimisé pour le web sans dégradation, il peut être transparent grâce à une couche alpha, celle-ci lui confère une transparence graduelle. En comparaison le format GIF ne possède qu'une transparence binaire.

On est tous d'accord pour dire que le PNG c'est chouette sauf sur Internet Explorer 6. Effectivement celui-ci ne gère pas la transparence et voici ce que vous verrez en affichant un PNG sur IE6.

ie6 png transparent

Si vous êtes sur cette page, vous connaissez l'utilité de rendre compatible votre site Internet sur IE 6. Pour ceux qui se posent encore des questions ces statitistiques devraient y répondre.

Statistiques d'utilisation des Navigateurs Web en Europe pour l'année 2009

  1. Internet Explorer : 46,44 %
  2. Firefox : 39,25 %
  3. Opéra : 5,80%
  4. Chrome : 4,28 %
  5. Safari : 3,18%
  6. Autres : 1,05%

On peut voir qu'Internet Explorer est encore en tête des navigateurs les plus utilisés, malgrès tout Firefox le talonne de près. Et IE 6 dans tout ça ? bien voyez le détail ci-dessous :

Statistiques navigateurs web 2009

8,16 % des Internautes "Européens" utilisent toujours IE6 ! impossible donc de faire l'impasse sur la compatibilité IE6. Rentrons dans le vif du sujet.

Les filtres AlphaImageLoader

Internet Explorer embarque un système propriétaire utilisant Directx pour certaines manipulations graphiques. On peut utiliser cette propriété via un Javascript ainsi qu'en CSS.

Méthode CSS

Tout d'abord il faut charger une feuille de style qui ne sera lue que par les navigateurs Internet Explorer de version égale et inférieure à la version d'IE 6.

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

Dans l'exemple suivant nous allons placer un background en PNG

css/style.css

div.logo {
 width:200px;
 height:100px;
 background: url(../images/logo.png) no-repeat;
}

css/ie6.css

div.logo {
 background: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo.png', sizingMethod='scale');
}

Remarques :

Vérifiez le chemin de l'image sur le filter, celui-ci débute à partir de la racine du site au contraire d'un background traditionnel.

3 options pour la propriété sizingMethod :

  • scale : étire l'image aux dimension du conteneur,
  • image : réduit ou agrandit le conteneur pour s'adapter aux dimensions de l'image,
  • crop : rogne l'image pour s'adapter au conteneur.

L'utilisation de cette méthode pose 2 problèmes majeurs :

  1. Il est impossible de répéter un background avec la propriété AlphaImageLoader (sauf images unies en utilisant la sizingMethod scale)
  2. Il peut arriver que les liens href soient inactifs, on peut généralement résoudre ce problème en passant le conteneur en position relative ou en lui redonnant le layout avec la propriété css zoom:1

IE PNG Fix

Ce Javascript ajoute le support quasi-native PNG de l'opacité alpha pour IE 5.5 et 6. Grâce à ce script vous pouvez gérer la répétion de background mais aussi leur background-position, les tags <img> sont également pris en charge.

Site officiel Démo Download

Partager cet article

Facebook Twitter Google My Space Delicious

Commentaires

Vous pouvez poster votre commenataire sans être identifié.

En revanche si vous possédez un compte, identifiez-vous cela vous évitera de renseigner à chaque vos coordonnées.

Les champs marqués d’une * sont obligatoires.

Ce formulaire accepte le BBCODE.