Blog Bio Agenda Jobs AjaxCFC

IE png auto-fix

Posted At : October 17, 2006 12:01 AM | Posted By : Rob Gonda
Related Categories: JS/DHTML

It's well known that PNGs with an alpha layer will not work properly in IE unless you manually patch it and apply some filters. IE7 fixed that, but it's still beta, and even after it launches, you need to cater to all visitors. I reworked some code I found into a nice, painless, solution to automatically fix all pngs in IE.

// IE PNG FIX: correctly handle PNG transparency in Win IE 5.5 > 6.x
if(window.attachEvent && (parseFloat(navigator.appVersion.split("MSIE")[1])<7)){
window.onload = function(){   if (document.body.filters){
var i=document.images.length; while(i--){
    var img = document.images[i], imgName = img.src.toUpperCase();
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){ var
      imgID = (img.id) ? "id='" + img.id + "' " : "",
      imgClass = (img.className) ? "class='" + img.className + "' " : "",
      imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ",
      imgStyle = "display:inline-block;" + img.style.cssText;
      if (img.align == "left") image.align='left'; //imgStyle = "float:left;" + imgStyle
z     if (img.align == "right")image.align='left'; //imgStyle = "float:right;"+ imgStyle
      if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle
      img.outerHTML=
        "<div style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
        + "(src=\'" + img.src + "\', sizingMethod='scale');\">"
} } } } };

All you need to do is to include this code in your file and all pngs with transparency will magically work. The catch -- not so much a catch -- is that it will fix your img tags. Background pngs will not be patched.

Don't you love IE?

posted on October 17, 2006 at 12:01 AM by Rob Gonda