Fabio Cicerchia

[ITA] Risolvere il problema delle PNG trasparenti su Internet Explorer

In Web

Come risolvere il problema della trasparenza delle immagine PNG su Internet Explorer 6?

E’ risaputo che ogni browser applica gli standard secondo la propria interpretazione, come è risaputo anche che Internet Explorer non li applica alla perfezione… Però dato che è il browser più utilizzato al mondo è bene che ogni sito web venga visualizzato correttamente su questo browser.

E per risolvere questo problema c’è un javascript che fa al caso vostro, che con un hack risolve questa incompatibilità (che è stata risolta su IE 7).

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in  with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<mce:script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></mce:script>
<![endif]-->

*/

function correctPNG() { // correctly handle PNG transparency in Win IE 5.5 & 6.
  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');\">"
        img.outerHTML = strNewHTML
        i = i-1
      }
    }
  }
}
window.attachEvent("onload", correctPNG);

Questo script non funziona per le PNG nei CSS. Per fixare quest’altro problema ci viene in aiuto la proprietà filter di IE.

Per esempio se avete un’immagine PNG che utilizzate come background:

#image {
  background: transparent img.png no-repeat top left;
}

aggiungendo filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’, xsrc=’img.png’); e sostituendo la PNG con none:

#image {
  background: transparent none no-repeat top left;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', xsrc='img.png');
}

risolverete il problema delle PNG nei CSS 

Enjoy with IE Hacks… 

# # # # # # #