PNG Transparency in Internet Explorer Revisited
There have been countless times where I have made user interfaces that were easily customizable using style sheets. Usually the graphics were generic enough so that you could change the colors without making it look too bad. Then there are the interfaces with the drop shadows, overlays, and other semi-transparent areas which would cause headaches when trying to mimic in IE.
Recently I was tasked with creating a slick looking AJAX demo app, and I do so much development in FireFox, I had forgotten that IE still doesn't handle the alpha channel well. I had already created most of the graphics using png's with alpha transparency, and I didn't want to remake everything. So I Googled around the net looking for a simple solution, but most solutions required using extra event handlers for each image tag's onload, or something similar. I'm somewhat lazy, and I don't want to have to add an attribute to all my image tags.
I tinkered around a bit, and found a relatively easy way to get it to work. The only thing you have to do is make sure that your png image tags have the width and height attributes defined.
Here's a solution I came up with:
window.onload = OnPageLoad;
function OnPageLoad(){
if (document.all)
fixPngs();
}
// Loops through all img tags
function fixPngs(){
for (i = 0; i < document.images.length; i++){
var s = document.images[i].src;
if (s.indexOf('.png') > 0) // Checks for the .png extension
fixPng(s, document.images[i]);
}
}
// u = url of the image
// o = image object
function fixPng(u, o){
o.src = 'spacer.gif'; // Need to give it an image so we don't get the red x
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
}
