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.
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