A friend asked me about getting PNG alpha transparency to work in Internet Explorer.

To do this, you should go to this website and save the javascript parts of the “view source” of the page you want into a separate file.

How it works (the basic idea):

1. It creates a javascript handler that after the page loads (and javscript onload handlers fire) gathers all the images and finds the pngs.
2. It replaces it with a span (or single transparent pixel gif in the old cases) stretched to the dimensions of the images
3. It applies the ActiveX filter, built into Exploder 5.5 and 6.0 to the original png

Some important notes:

• IE 7 doesn’t need this as it is PNG transparency built in. There is a small wrapper HTML comment thing that takes this into account (as well as providing other subtle benefits).
• My friend might want to use the older version of code that uses a single transparent GIF so it can replace form images and mouseovers. Luckily that stuff is explained fully here.
• This does not work on background PNGs because the filter won’t allow for repeats or cropped images. For Plaxo’s new rounded rectangles and buttons, I created a separate set of CSS rules that use a single layer transparent GIF instead of PNG. When it detects IE5.5 or 6, it changes the class to use the new rules. You lose the drop shadow
• If you are using heavily ajax’d site, you’ll need to run the correctPNG() function after injecting anything into the DOM.

Some improvements I noticed between this version and the one I wrote for Plaxo:

• It doesn’t always use a single pixel gif. The deal here is if you don’t have a single pixel gif in the location referenced, you get nothing at all!
• If you aren’t browsing in Internet Explorer 5.5 or 6, it won’t load the javascript at all! We can’t do this trick because we manage the script loads within dojo toolkit.
• You won’t see a “blink” when the original PNGs load and then are replaced by a filter.