We make stuff for the internet

Arguably, the most liberating feature of the Portable Network Graphic is its support for multi-bit transparency. One could just as well argue, then, that the most frustrating thing about PNG transparency is the fact that the Windows version of Microsoft's Internet Explorer doesn't natively support it. (While arguments could be made about this being one of the most frustrating things about IE, there are plenty of equally compelling counter examples, and any argument about IE frustrations is not one to be present for without protective headwear anyway.)

There are a handful of JavaScript-based workarounds out there, but most seem to have a really annoying problem: They require you to hard code script calls all over your HTML, which hardly makes for an elegant, portable solution. Your markup should be neat and tidy, and - at least in principle - should just be limited to semantically marked-up content. All description of presentation - especially the handling of browser issues - ought to be separated. After all, that's what CSS was for, wasn't it?

So, what follows is a solution that will give you full transparency support for PNGs in IE with as little kludging around as possible. Embed your PNGs in normal <img> tags as you would with a JPEG or GIF, and include this script at the end of your document. The script takes care of the rest.

The script

badMath-ieWinPNGAlpha.js:

//©2006 Bad Math Inc. (http://www.badmath.com/)  Free to use, so long as this credit line is included.

//convert any <img> tags with '.png' in the filename to use MS's AlphaImageLoader on IE/Win, to support PNG alpha transparency
//'x.gif' (single-pixel transparent gif) is required

//USAGE: include this script at the *bottom* of your page:
//e.g.: <script type="text/javascript" language="JavaScript" src="badMath-ieWinPNGAlpha.js"></script>

function ieMakeTransparentPNGs() {

    if (
        ((navigator.userAgent.toLowerCase()).indexOf('msie') + 1) &&      //'+1' because indexOf returns -1 if string is not found
        ((navigator.userAgent.toLowerCase()).indexOf('windows') + 1)  &&
        !((navigator.userAgent.toLowerCase()).indexOf('opera') + 1)       //Opera reports itself as MSIE/Windows, but also adds an 'Opera' string
        ) {

        for (i=0;i<document.images.length;i++) {
            if (document.images[i].src.toLowerCase().indexOf('.png') + 1) {
                var pngImage = document.images[i];
                pngImage.style.width = pngImage.offsetWidth;
                pngImage.style.height = pngImage.offsetHeight;
                pngImage.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+pngImage.src+"',sizingMethod='scale');";
                pngImage.src = 'x.gif';
            }
        }
    }

}

ieMakeTransparentPNGs();

How it works

Since version 4, Internet Explorer has included a (rather silly and totally proprietary) mechanism for applying visual filters and transitions to objects in a web page. In version 5.5, the library of filters and transitions available was expanded, and brought with it the AlphaImageLoader filter. To quote the previously linked-to MSDN site, it, "displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image." If we use a PNG for that sandwiched-in image, the IE filter renderer (unlike IE's native HTML renderer) will actually respect the image's alpha channel. Our trick, therefore, is to move our PNG out of the <img> element itself, and into that special filter space that exists behind it, but still in front of its background.

The script below does that in a pretty straightforward manner. After a rudimentary check for IE/Win^*, it loops through all of the images in the document by way of the aptly-named "document.images" object, does a case-insensitive check on each filename to see if it ends in ".png", and if it does, performs a quick swap. The <img> element is kept intact, so as not to interfere with any CSS you may have cascading down onto it. Instead, the <img>'s "src" attribute is replaced with a single-pixel transparent GIF. In this example, it's a file called "x.gif" (a file we've been using since 1997, and whose usefulness to this day is still surprising).

This method will require that the new image's dimensions be explicitly set, so the script also grabs the element's rendered size ("offsetWidth" and "offsetHeight"), and explicitly declares them through the object's CSS height and width properties (or, as we say in JavaScript, "style.width" and "style.height"). The rendered dimensions are used so as not to override any dimensions you may have applied in the <img> tag, or elsewhere in the CSS.

Following that, IE's proprietary "filter" style is attached, specifically naming your original PNG as the src for the AlphaImageLoader.

And that's it. Full alpha support in your PNGs in IE/Win 5.5+, without getting your hands - or your markup - all that dirty.

(^* by all means, feel free to replace the browser check with a more robust one. The one included does not check for specific version numbers, or any unusual IE spinoffs. Simplicity was the focus of this example, and this example works pretty well. IE7 is apparently going to have native PNG alpha support, so it will probably be worthwhile to filter that browser out of this script when the time comes and that support is proven.)