JavaScript: Fix PNG Transparency in IE without .htc file

The current versions of Internet Explorer do not support PNG transparency. So your nice logo with the faded shadow or invisible background will appear properly in Firefox and Opera, but will have a grey/gray background in IE. Here's how to fix that with one quick script.

This script is adapted from the popular PNG fix, which uses the CSS behavior attribute, and a .htc file. I don't like that method; it's bulky, requires an additional file, and behavior is not even valid CSS. So here's a function that does all the same in just a few lines.

function fixPNG()
{
        for(var i=0; i<document.images.length; i++)
        {
                if(document.images[i].src)
                {
                        var imgName = document.images[i].src.toUpperCase()
                        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                        {
                                document.images[i].runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + document.images[i].src + "', sizingMethod='image');";
                                document.images[i].src='images/blank.gif';
                        }
                }
        }
}
agt = navigator.userAgent.toLowerCase();
if((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1))
{
        window.attachEvent("onload", fixPNG);
}

Don't forget to place the blank.gif in the images forlder!

Tagged as: .htc, file, Fix, IE, in, Javascript, PNG, Transparency, without