Transparence PNG et Internet Explorer

Publié le par Francisek

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 :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a massa. Ut convallis elementum wisi. Mauris malesuada diam id urna. Maecenas a dui in risus volutpat vulputate. Ut congue. Aliquam nibh velit, tincidunt eget, gravida quis, laoreet ac, nulla. Nunc diam. In interdum odio a velit. Sed mattis magna eget mauris. Vivamus orci lectus, nonummy sed, faucibus vel, auctor id, diam. Mauris sollicitudin ipsum vel magna. Aenean nulla sapien, molestie eget, hendrerit at, facilisis non, nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam pellentesque tincidunt libero. Etiam id sapien. Sed convallis condimentum nibh. Ut gravida, augue sit amet pulvinar feugiat, leo metus ullamcorper orci, non porttitor libero libero in pede.
Image non patchée
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a massa. Ut convallis elementum wisi. Mauris malesuada diam id urna. Maecenas a dui in risus volutpat vulputate. Ut congue. Aliquam nibh velit, tincidunt eget, gravida quis, laoreet ac, nulla. Nunc diam. In interdum odio a velit. Sed mattis magna eget mauris. Vivamus orci lectus, nonummy sed, faucibus vel, auctor id, diam. Mauris sollicitudin ipsum vel magna. Aenean nulla sapien, molestie eget, hendrerit at, facilisis non, nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam pellentesque tincidunt libero. Etiam id sapien. Sed convallis condimentum nibh. Ut gravida, augue sit amet pulvinar feugiat, leo metus ullamcorper orci, non porttitor libero libero in pede.
Image patchée (IE)

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;" />
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]-->

Publié dans CSS et Design

Commenter cet article

mediatek 26/08/2007 22:31

en fait francisek, cet aprèm j'ai remplacé mon image par un format png8, du coup elle passe mais est moins qualitative.( bidouillages). je voudrai garder celle d'avant en png24 (pour la qualité) et appliquer pleinement ton entourloupe. donc je vais continuer tes conseils en utilisant une image transpareente.

mediatek 26/08/2007 14:53

bonjour francisek, je me remets à ce travail de transparence, et je me heurte à plusieurs barrages.
tout d'abord j'ai changé l'url de mon image qui est maintenant chez imageshack.
les pb rencontrés sont:
1/ mon image est défilante ds une bannière. son code est la suivante dans le source de l'entête: .

2/ j'ai appliqué ta formule avec mon url qui donne:

3/ j'ai collé ta formule à la place de mon url, mais ça n'a pas marché.

4/ dans tes explications, tu ajoutes : "où blank.gif est une image GIF totalement transparente." faut il mettre à la place de blank gif l'url d'une image gif transparente de la taille de mon image ?

tu vois je suis complètement pommée. si t'as un petit moment, pense à moi. je ne lacherai plus l'affaire et guetterai ta réponse tous les jours. merci à toi !

Francisek 26/08/2007 18:16

Bonjour Mediatek,Tout d'abord, l'image défile et est transparent sous FireFox et IE 7. (ça c'est dit)L'image blank.gif doit $etre une image gif complètement transparent dont la taille est totalement arbitraire. Elle ne sert qu'à avoir une image à mettre en remplacement de la vraie.
 

mediatek 27/04/2007 22:28

super ta réponse, ça me rassure et ça me parait plus simple. c'est vrai qu'harchive host déconne en ce moment. c dommage d'ailleurs car j'adore sa simplicité. merci, en tout cas c'est super sympa d'avoir suivi mon fil.

Francisek 01/05/2007 15:55

Ils sont un peu victime de leur succès ...
 

mediatek 26/04/2007 23:21

voici l'url:
mais je suis gênée car IE déconne irrégulièrement. là en ce moment j'ai un bon affichage. c dommage c'est plutot le soir.
un autre truc bizarre, quand je t'ai posté le com, il ne s'était pas affiché. et pourtant j'y suis retournée plusieurs fois, sans résultat. du coup j'ai laissé tomber pensant que t'avais trop à faire et que tu bloquais les com. et à bout de farfouillage j'y suis revenue et HO SURPRISE ! il y était et en plus tu m'as répondue !! merci francisek

Francisek 27/04/2007 13:53

Si l'affichage est n'est pas bon périodiquement, c'est certainement dû à une surchage chez l'hébergeur de ton image. A part trouver un hébergeur plus disponible, il n'y a rien à faire.Pour les commentaires, ils sont modérés : ils n'apparaîssent que si je les autorise. Ca me permet de savoir à qui je n'ai pas répondu. Et c'est d'autant mieux que je ne suis plus régulièrement sur mon blog.

mediatek 12/04/2007 22:49

help j'ai essayé sur une image défilante ds ma banniere, et je n'ai plus mon image. je pense que c'est une erreur de ponctuation, mais je ne m'y connais pas assez pour corriger. peux tu m'aider francisek. voici le code que j'ai mis: ', sizingMethod='scale');width:821px; height: 84px;" />

l'affichage que j'ai est : Fichier hébergé par Archive-Host.com', sizingMethod='scale');width:821px; height: 84px;" />
merci de me répondre

Francisek 17/04/2007 13:32

C'est dans l'attribut src que ça pose problème, peux-tu me donnet le code complet que tu insères ?