PNG Support im alten Internet Explorer (5.x/6.x)

Heute haben wir ein sehr einfaches und nützliches Code Snippet auf snipplr.com gefunden mit welchem man in alten Internet Explorer 5 und 6 Browsern den PNG Support und deren wirkliche Transparenz anwenden kann.

Es wird lediglich ein JavaScript im Head des HTML Codes benötigt welches auf der geladenen HTML Seite nach allen vorhandenen PNG Bild-Dateien sucht und diese in ein SPAN mit der effektiven PNG Transparenz umwandelt.
Mit dem Conditional Tag wird gewährleistet dass dies nur in den Browsern ohne PNG Support wie der Internet Explorer (5.x und 6.x) geladen wird:

<!--[if lt IE 7]>
 <script type="text/javascript" src="/_local/templates/scripts/pngsupporter.js"></script>
<![endif]-->

Modifikation

Damit dies in unserem CMS und auch sonst ein wenig besser und fehlerfrei angewandt wird, wurde dies von uns etwas modifiziert.

Die Datei pngsupport.js mit der PNG Support Funktion sieht wie folgt aus:

function correctPNG() {
/* correctly handle PNG transparency in Win IE 5.5 & 6.
  http://snipplr.com/view/8637/png-support--no-other-files-needed/ */

  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 style="\" src="'" sizingmethod="'scale');\"></span>";          
              img.outerHTML = strNewHTML;         
              i = i-1;   
          }
      }
  }
}
window.attachEvent("onload", correctPNG);

Zu beachten gilt noch, dass die entsprechende Ebene mit dem PNG Bild ein umschlossenes DIV Tag benötigt, damit nicht das obere Nodeset überschrieben wird:

 <div>
<img id="left_collage_bottom" src="../images/bg_collage.png" alt="" width="323" height="190" />
</div>

Nun wird das PNG24 im älteren IE6 angezeigt!

Das Original Skript ist von conspirator auf snipplr.com zu finden:
http://snipplr.com/view/8637/png-support--no-other-files-needed/