Internet Explorer PNG Fix

[(Shovel)]

When I say "fix", I mean "ugly hack". However, I've spent some of today working at this, and was wondering if some of you would be willing to help test it. You're completely free to do as you wish with it, just some feedback would be nice really

We're all familer with the "can't use PNGs cause of bloody Win32 IE" transparency problem, resulting in grey ghosting around the image where transparency should be.

However, parts of the IE implementation *do* support the transparency, therefore it's just a case of trying to use them.

This hack uses a proprietry Microsoft filter to redisplay the png image complete with transparency. It should function in IE 5.5 and up - maybe versions before, but I've been unable to test that so far.

Theres a zip of my example page that you can download from here: http://benward.studentssocial.co.uk/files/png.zip
Contained is an example page, also containing the javascript, and two required images, the transparency inclusive PNG and a transparent gif.

The code works like this:

function isIE() {
		var client = navigator.appVersion.toLowerCase();
		var ie  = client.indexOf('msie');
		return (ie!=-1);
}

function fixPNG() {
 if (isIE()) {
  if (!document.getElementsByTagName) return;
  var imgs = document.getElementsByTagName("img");
  for (var i=0; i<imgs.length; i++) {
	 var img = imgs[i];
	 if(img.src.match(".png")) {
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img.src+"')";
	  img.src = "blank.gif";		
	 }
  }
 }
}
window.onload = fixPNG;

Firstly checking that this is IE we're dealing with - since the other browsers support PNG problem free - it then uses the DOM to grab all the images on the page. Working through all the PNG images on the page it adds the proprietry MS filter to the image object, before swapping out the image for a transparent gif, so that only the PNG (now appearing as a filter) can be seen. Defining the width/height properties means that the title text of the image is preserved over the whole image region.

Since the gif is fixed at the size of the original image, I don't think this will cause any layout issues, the only major error is that choosing "Save Image" from a context menu will be buggered, since it will save the gif, not the PNG. Small price to pay I think though.

So, please take a look if you're interested. The code can be easily adapated, if you're trying to exterminate images by using DIV tags and a CSS class instead it should be possible to "getElementByClass" rather than TagName, and running a similar set of commands to remove the background image from the CSS class and apply the filter.

Thoughts anyone?

Cheers, Ben

 

[(Shovel)]

* To see it tested fully, just try changing the background colour and checking that the transparencies alter accordingly White BG does at least demonstrate that the grey ghosting dies horribly though

* The hack is also completely user independent - apart from the IE 5.5 requirement. Rather nicely it doesn't require the user to even know, let alone do anything to activate it.