Grafica

Forzare la trasparenza di un .png in Internet Explorer 6

Pubblicato il da Aldo

ie7-logoEro incerto se scrivere questo post. Incerto perché si deve invitare la gente a non usare Internet Explorer 6, invece di utilizzare questi hack per far visualizzare bene il nostro sito anche nelle vecchie versioni del browser di casa Microsoft. Se li utilizziamo è come dire loro: “continuate pure ad usarlo”. Ma può capitare che in un caso particolare sia necessario intervenire per modificare il comportamento di questo browser. A me è capitato e non avevo scelta. Dovevo intervenire e questo è quello che ho provato.

Dovevo usare per forza un’immagine png trasparente e la persona aveva IE6. Di installare Firefox non se ne parlava nemmeno. In sostanza, dovevo forzare Internet Explorer 6 a renderizzare correttamente il canale alpha (la trasparenza) di una immagine .png. Ecco le righe di codice che ho usato:

<div style="
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100px;
  display:inline-block;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mio-sito.it/percorso/alla/mia/immagine.png');">
  <img style="
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
  src="http://www.mio-sito.it/percorso/alla/mia/immagine.png"
  width="200" height="100" border="0" alt="" />
</div>

Chiaramente vanno personalizzati alcuni valori come position, width/height e src. Ecco una diapositiva di come viene renderizzato in XP con IE6:

Internet Explorer 6 renderizza correttamente la trasparenza di una immagine PNG dietro applicazione di un hack.
Internet Explorer 6 renderizza correttamente la trasparenza di una immagine PNG dietro applicazione di un hack.

Prima di chiudere una nota positiva. Ho dato un’occhiata alla pagina di Wikipedia in cui si parla di questo browser. Ho trovato una tabella sulla percentuale d’uso di IE ed ecco cosa ho visto:

La percentuale d'uso di Internet Explorer nei vari anni e versioni.
La percentuale d'uso di Internet Explorer nei vari anni e versioni.

Una soddisfazione! Dal 94,43% siamo giunti al 72,65%: ha ancora quasi i 3/4 del mercato, ma sono sicuro che Firefox e i browser open andranno sempre più avanti.

La fonte dell’hack è questa, dove trovate anche degli altri adattamenti del codice.

, , , ,
Aldo
Aldo Latino usa con entusiasmo KDE neon, è un appassionato di WordPress e si diletta a giocare a scacchi. Ha anche una lista dei desideri. Per altre informazioni visita la sua .

7 commenti

  1. Ciao Aldo!
    Anche io a lavoro devo combattere con i png su ie6. Se ti può interessare io uso questo filtro javascript che trasforma tutte le png presenti sulla pagina.

    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
      }
   }
}

    Reputo il post molto utile a far capire a gli utenti che ancora non hanno deciso di fare il grande passo dimostrando quanto siano obsoleti certi software.

    Ciao!

I commenti sono chiusi