Fix per PNG trasparenti su Internet Explorer

Non mi pronuncio sulla qualit� di Internet Explorer. � un browser estremamente popolare e sarebbe un suicidio fare un sito che non si vede bene su tale browser. Di base, su IE non si vedono bene le immagini in formato PNG con un canale alpha ad 8 bit. Questo vuol dire che quantunque si faccia uso di immagini a trasparenza variabile (facilissime da realizzare e comodissime da utilizzare), sar� necessario fare attenzione a come saranno visualizzate su IE.

Risolvere il problema non � banale, ma una volta capito non presenta grossi ostacoli. Per le immagini inserite nel testo con tag IMG standard, � necessario aggiungere il seguente codice nella sezione HEAD, come javascript:

	<!--[if gte IE 5.5000]>
 	<script type="text/javascript" xsrc="pngfix.js"></script>
 	<![endif]-->
 

Dove il file pngfix.js contiene il seguente codice (con credits):

// Correctly handle PNG transparency in Win IE 5.5 or higher.
 // http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
 
 function correctPNG()
    {
    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 = "" 
          img.outerHTML = strNewHTML
          i = i-1
          }
       }
    }
 
 window.attachEvent("onload", correctPNG);
 

Per i png nei CSS il problema � un p� pi� complicato ed � necessario utilizzare tag specifici di IE. Ogni immagine png che volete usare come background va sostituita da un "none" nella voce background e va aggiunta, nello stile, una voce:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
         sizingMethod='scale', xsrc='img.png');
 

dove img.png � appunto l'immagine da utilizzare. Ad esempio, se si ha una voce nel foglio di stile:

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

va successivamente aggiunto nella parte HEAD il seguente codice:

    <!--[if gte IE 5.5]>
     <style type="text/css">
     #logo { 
         background: transparent none no-repeat top left;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
              sizingMethod='scale', xsrc='logo.png');
     }
     </style>
     <![endif]-->
 

PS: il codice JavaScript fornito NON gestisce eventuali PNG utilizzate come MAPPE. Poich� viene sostituita l'immagine essenzialmente con uno span con un certo background, non � possibile utilizzare direttamente la MAP html con immagini png trasparenti su IE utilizzando questo fix.

PPS: Juna ha aggiunto qualcosa in un nuovo koan.�