Les PNG transparents et Internet Explorer

Vous le savez certainement, les anciennes versions d'Internet Explorer gèrent mal les PNG transparents. En effet, la transparence ne fonctionne correctement qu'à partir de la version 7 d'IE.

Heureusement, des solutions existent, je vais vous en présenter une...

Microsoft à mis en place des propriétés CSS non reconnues par le W3C pour contrer ce problème. Je pense pas que le terme 'contrer ce problème' soit réellement adapté vu que le problème a(volontairement) été provoqué par l'équipe Microsoft.

Pour quoi ont-ils donc fait ça ?

Simplement pour 'forcer' les gens à utiliser le format GIF (Microsoft) plutot que le format PNG.

Bon, retournons à nos moutons. Concernant notre problème, d'autres personnes ayant étudiés le problème ont créé une fonction Javascript qui ajoute la propriété CSS filter propre à Microsoft aux images PNG de la page.

En fait, la fonction fait bien plus, elle converti les images en span ayant l'image comme background, background sur lequel est appliqué le filter.

Assez parlé, voici la solution :

  1. Il faut télécharger ce fichier javascript et le placer dans votre dossier de javascript..

    Il contient le code suivant :

    /*
    
    Correctly handle PNG transparency in Win IE 5.5 & 6.
    http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
    
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    
    */
    
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    
    if ((version >= 5.5) && (document.body.filters))
    {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText
             if (img.align == "left") imgStyle = "float:left;" + imgStyle
             if (img.align == "right") imgStyle = "float:right;" + imgStyle
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
    }
    
  2. Appeler le fichier si le navigateur est concerné par notre problème.

    Cela se fait avec le code suivant à placer dans la partie de votre page :

    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    

Vos PNG sont désormais transparent avec tous les navigateurs.

Le script provient de http://homepage.ntlworld.com/bobosola/, merci à eux.

comments powered by Disqus