Wednesday, April 25, 2007

Transparent PNG Rollovers in IE6, IE7 and Firefox

I haven't posted anything remotely technical in a while, but I thought this would be a good one.

I'm working on chopping a comp to html at work, and while the design looks nice, it requires a few transparent PNGs. Of course Firefox renders them correctly, as does IE7. Besides the tabs, I'd say that's the biggest improvement in IE from 6 to 7. IE 5.5+ pretty much doesn't work.

I've tried just about every method/fix/hack to get transparent PNGs to show up correctly in IE6. I've tried applying just the filter, using a behavior and having javascript fix all my images but none worked. Well, the last one worked, but only when applied to individual images. Iterating through all the images wasn't really viable, and the defer attribute of the script tag didn't work.

Though I just found this article on mouseovers, I came up with a cute little fix.

Click to view code

If I load each image and immediately hide the hover, the rollover will work by switching the visibility. Using prototype it's trivial to toggle both.

And I do understand this isn't the best way to do it. But hey, if I could have gotten ANY of the other's to work... I would have used them.


Anonymous said...

can you post a demo?

jesse said...

Click the "Click to view code" link and you should be able to view the demo code.