IE6 png Alpha Transparency Script
Eric Meyer just posted an updateto his s5 script in which he has added support for alpha transparency for IE6. The fix comes thanks to Erik Arvidsson’s pngbehavior.htc. Very cool… sucks to have to hack around IE yet again but what are you going to do?
His one lament about this fix:
The one sort-of drawback to using this approach is that it seems to require that the call to pngbehavior.htc sits in an embedded style sheet, or else nothing happens. This may very well have to do with the way the JavaScript monkeys around with external style sheets during startup. If any of you IE/Win JS gurus can figure out a way to get the behavior to fire without having to embed it into the presentation, that would be stellar. If not, it’ll just be documented as a “leave this in if you’re using alpha PNGs; otherwise you can take it out†thing.
Now I don’t pretend to be an “IE/Win JS guru” but decided to play around anyway. Using the simpler example at the top of Erik’s page I saw what the “bare necessities” were. Now that I go back and look at his .htc behavior closer, I see that I am doing some of what he was doing there… but just in the JS.
What I came up with is a quick little JS script that cycles through all the images on the page, if an image is a png (detected by the extension) then it applies the appropriate filter and replaces the image with a clear .gif file. This eliminates the need to have any image specific references in the CSS or JS, and the need for the HTC file altogether.
See a demo of the script in action.
I’d get all fancy and separate out the script and stuff for you to easily peruse, but I probably need to get back to work. So just view source and poke around.
Hopefully it is found useful, and will be a help to Eric’s issue. Thanks to Erik for the initial script and research. Feedback is welcomed as I’m always willing to learn.
Comments(7)
great script. only 1 bug I see that I could use help with…
still seems to do it to all images (even JPG).
The other side effect is that the user can’t save/download the source image, since right clicking reveals the blank GIF overlay….
Hadn’t tried to save it, but that does make sense. Don’t think there is anything you can really do about that. But will ponder upon it.
The problem with this script is, of course, that it doesn’t work with PNG background images.
I found a problem with your script. It seems that it did not always work for me in IE6. This was because I did not set height/width for each of my .png’s therefore the overlay image was only 1×1 and not showing up. I added a simple method to keep track of the height and width of png and should work on any dimension.
w = is[x].offsetWidth;
h = is[x].offsetHeight
is[x].src = “images/z.gif”;
is[x].width = w;
is[x].height = h;
PS. Thanks for the great script. I have tried many others and they have all failed.
This site uses transparent PNG’s to create a Vista style aero look:
http://www.ilovetorrent.nl
Many THX goes to Ralf S!
BTW you can go directly to the website of Angus Turnbull:
http://www.twinhelix.com/css/iepngfix/
Hi.my country has blocked the access to the web site containing this script.i will be thankful if some one sends it to me
Mohammad_rahmani_xyz@yahoo.com