Transparence PNG et Internet Explorer
Introduction
Les images transparentes sont bien utiles sur Internet car elles permettent (entre autres) d'habiller un site sans avoir à se préoccuper de ce qui est derrière l'image.
La plupart des sites utilisent encore l'ancien format d'images transparentes - le format GIF - qui demeure très limité. En effet dans une image GIF, il n'y a que 2 niveaux de transparence (opaque ou transparent), une couleur étant utilisée comme masque transparent. De plus le format GIF ne supporte que 256 couleurs maximum.
Le successeur du format GIF est le format PNG (on prononce ping) qui se décline sous deux variantes :
- le PNG-8 permet 256 couleurs et la transparence. Il concurrence directement le format GIF avec un poids bien souvent inférieur à qualité égale.
- le PNG-24, autorise 255 niveaux de transparence et des millions de couleurs. Si la compression de l'image ne dégrade pas la qualité, le poids lui, est bien supérieur à celui des JPG (non transparentes). Pour un nombre de couleur faible, il est cependant acceptable.
Compatibilité du PNG-24
Malheureusement, certains navigateurs (pour ne pas citer Internet Explorer) ne gèrent pas correctement les niveaux de transparence du PNG-24. En effet, sous IE, il demeure un fond coloré sous l'image qui rend la transparence caduque. Dans l'exemple ci-dessous, si vous voyez le texte derrière l'image de gauche, c'est que votre navigateur gère correctement les PNG-24 :
Pour pallier à ce problème, il faut utiliser un subterfuge qui consiste à appliquer un filtre DirectX à l'image PNG et remplacer l'image par une image totalement transparente :
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url_de_l_image', sizingMethod='scale');"
Cela fonctionne à la condition d'expliciter la taille de l'image.
De plus, selon l'emplacement de l'image, il peut arriver que des liens placés dans le même cadre ne soient plus cliquables. Il faut alors recourir au style CSS z-Index pour rectifier l'accessibilité à ces liens:
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url_de_l_image', sizingMethod='scale');width:143px;z-Index:0"
Concrètement l'affichage d'une image d'url monimage.png et de dimensions 20x30 sera corrigé pour IE de cette manière :
<img src="blank.gif" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='monimage.png', sizingMethod='scale'); width:20px; height: 30px;" />
où blank.gif est une image GIF totalement transparente.Pour les images de fond, il en est de même : personnellement, j'utilise un javascript pour rectifier automatiquement la transparence des PNG-24 dans IE en attribuant au préalable la classe CSS PNGbg aux éléments ayant une png en fond.
L'élémént de fond ressemble donc à :
<div class="PNGbg" style="width:143px;background-image:url();"></div>
et je place ce script en bas de page (il ne sera actif que sous IE) :<!--[If IE]>
<script type="text/javascript">
function getElementsByClass(maClass, fromTag) {
var tabRetour = new Array();
var tabTmp = new Array();
var arr_class;
tabTmp = document.getElementsByTagName(fromTag||"*");
var j=0;
for (i=0; i<tabTmp.length; i++) {
arr_class = tabTmp[i].className.split(" ");
for(var k=0; k<arr_class.length;k++ )
if(arr_class[k]== maClass) {
tabRetour[j++]=tabTmp[i];
}
}
return tabRetour;
}
function hackPNGbg(cl, tag)
{
try {
var pngs = getElementsByClass(cl,tag);
for(i in pngs) {
var src = pngs[i].currentStyle.backgroundImage.replace(/(url[\s]*\()+/, "");
src=src.replace(/(\")+/g,"");
src = src.substr(0,src.length-1);
pngs[i].runtimeStyle.backgroundImage="url(blank.gif)";
pngs[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
} catch(e){};
}
hackPNGbg("PNGbg");
</script>
<![EndIf]-->
<script type="text/javascript">
function getElementsByClass(maClass, fromTag) {
var tabRetour = new Array();
var tabTmp = new Array();
var arr_class;
tabTmp = document.getElementsByTagName(fromTag||"*");
var j=0;
for (i=0; i<tabTmp.length; i++) {
arr_class = tabTmp[i].className.split(" ");
for(var k=0; k<arr_class.length;k++ )
if(arr_class[k]== maClass) {
tabRetour[j++]=tabTmp[i];
}
}
return tabRetour;
}
function hackPNGbg(cl, tag)
{
try {
var pngs = getElementsByClass(cl,tag);
for(i in pngs) {
var src = pngs[i].currentStyle.backgroundImage.replace(/(url[\s]*\()+/, "");
src=src.replace(/(\")+/g,"");
src = src.substr(0,src.length-1);
pngs[i].runtimeStyle.backgroundImage="url(blank.gif)";
pngs[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
} catch(e){};
}
hackPNGbg("PNGbg");
</script>
<![EndIf]-->
Publicité