About three years ago, I published a hack for Youngpup’s Sleight script for enabling PNG transparency in Internet Explorer. If you’re not familiar with the issue, IE doesn’t natively support alpha transparency for PNG images, but does have a proprietary ‘filter’ that can be applied to achieve the same effect. Youngpup’s script is a drop-in solution for applying the filter to PNG images in a page. My hack enabled the same to be true for elements with PNG background images.

The content on Youngpup’s site has come and gone a little over the years, so I got out of the habit of following for updates. Today a reader alerted me to a new version of the script – the main new feature being the ability to monitor state changes. This is handy if, for example, you have an image that you’re swapping in and out with JavaScript, like an image rollover. The way Sleight works is to swap out the original image for a transparent GIF, and re-apply the image using the filter. Obviously then if any other scripts on the page attempt to change the src of the image you’ll end up with a strange layered effect. (Hmm .. that could be useful for something). As the original article I published three years ago has consistently been one of the busiest on this site, I figured it was probably worth updating my bgsleight hack to match.

I’m not sure how useful it is with background images, as these sorts of swaps would usually be done in the CSS with the use of the :hover pseudo class, or similar. In those cases, the script won’t be triggered, as it’s watching for property changes which typically only get fired by a scripted change. With a :hover there’s technically no change to the object. As IE has poor support for pseudo classes on much more than links, I guess this could be useful for someone.

The only other point worth making is that my hack is rather more expensive to run than the original. Whereas for inline images it’s possible to loop through only the document.images collection (remember we’re talking IE-only here), PNG background images could be applied to any element in the page. Therefore, I end up looping through document.all. If you know you’re only using PNG backgrounds on a certain type of element (li is common), you may wish to edit to do perform a quick document.getElementsByTagName() and loop through that instead.

Anyway, I’m sure someone will find this useful. As before, 99% of the code is Youngpup’s, not mine. I’ve just hacked at it a bit.

Implementation is easy:- just link the file into the head of your page. The script looks for a transparent GIF called x.gif, so you’ll need to make sure that’s in place, or edit the script accordingly. If you have other scripts on the page, lookout for onload conflicts. Any problems or questions, feel free to use the comments below, but I can’t promise any support.

Update: the latest version of this script, along with more detailed discussion of the subject, can be found here: Transparent PNGs in Internet Explorer 6