PNG-32Bits Transparent avec Internet Explorer <=I6
 ©2004 - KdZ' > Pour TTH

 

Le format PNG 32 bits avec un fond transparent n'est pas pris en compte sous Internet Explorer, (à l'heure où sont ecritent ces lignes, nous en sommes à la version 6SP1) alors voila comment y remédier.

Cette tehcnique fonctionne parfaitement sous les versions recentes de tous les navigateurs.

 

Pour la comparaison, j'utilise un fond (moche je l'admet, mais c'est pour mieux se rendre compte...) multi-dégradé, et avec une texture. (Image de droite)

 L'image de fond utilisée lors des tests




 

Sans ombre (img seule) Avec ombre (img seule) Sans ombre (calque) Avec ombre (calque)
1 2 3 4
Méthode 1 Méthode 2

 

Le multi-degradé du fond des 4 cellules, est un fichier jpg normal, au dessus, les ronds de cette couleur sont les fichiers png... :

  1. [CELLULE] : png 32bits avec transparence, sans effet d'ombre, sans calque et avec css.
  2. [CELLULE] : png 32bits avec transparence, avec effet d'ombre, sans calque et avec css.
  3. [CELLULE] : png 32bits avec transparence, sans effet d'ombre, avec calque et avec css.
  4. [CELLULE] : png 32bits avec transparence, avec effet d'ombre, avec calque et avec css.

 

Sans ombre (img seule) Avec ombre (img seule)
1 2
Sans méthode (Image "brute")

 
  1. [CELLULE] : png 32bits avec transparence, avec effet d'ombre, sans calque ni css.
  2. [CELLULE] : png 32bits avec transparence, sans effet d'ombre, sans calque ni css.




 

Normalement, vous devriez voir toutes les images sans de fond gris.

Voila la différence entre IE et les autres navigateurs (browsers) supportant la transparence du PNG en mode 32Bits :

  • En haut (au dessus des pointillés noirs entourés en blanc), IE affiche un résultat négatif, il n'y a aucune transparence, vous remarquerez le fond gris...
  • En bas, dans un autre navigateur, le résultat est positif, le format PNG-32Bits est correctement pris en charge ; le fond est bien transparent.
 Résultats avec IE et un navigateur "normal"

 

  • La methode avec les calques n'est pas conseillée puisque pas ou moins compatible jusqu'aux versions 6 pour Nescape, 1.4 pour Mozilla, et 5 pour Opera (incluants aussi celles-ci)
  • Mozilla, Opera et NS6.2+ prennent en charge une img png avec niveau de transparence 32bits.

  • xx xx x : Code qui doit être modifier en fonction de vos besoins.
  • xx xx x : Code/Balises qui peut/peuvents être modifiés(ées)...

 

Le code pour la methode 1 :
Code html :
<img src="x.png" width="x" height="x" border="0" alt="x" class="png">
Code CSS :
img.png {
behavior: url(png.htc);
}
Code du fichier png.htc
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
</script>
</public:component>

 

Le code pour la methode 2 :
Code HTML :
<span style="position:relative;left:0px;top:0px;width:xpx;height:xpx;" id="x">
<!-- that is used as a container, so the absolutely positioned elements will be displayed inline.
The height and width should match those of the image -->
<span style="position:absolute;left:0px;top:0px;
/* the image will be aligned correctly and absolute position makes AlphaImageLoader work */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg1.png');
/* apply the background image with Alpha in IE5.5/Win. The src should match that of the image */
" id="x"><img style="
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
/* make the real image fully transparent in IE5.5/Win, so the Alpha image can show through */
" src="x.png" width="124" height="180" border="0" alt="x"></span></span>

 

Exemples divers
Voila, pas beau non plus mais ça montre bien les possiblitées du PNG32 bits avec une transparence alpha. (Vous pouvez déplacer le logo)

 

 

 

 

©2004 - KdZ'