Transparent Rollovers: Javascript or CSS?

which method do YOU recommend?

[matthewwithanm]

This is a poll of sorts...I have a simple design that has semi-transparent circles that overlap another picture, which can be seen through the circles. When the mouse passes over the circles, I want them to become less transparent (more opaque). As I figure, there are two different ways of doing this:

1. The traditional JS image swap method: just make another version of each circle that's more opaque and substitute it in on mouseover.

2. Use CSS to adjust the opacity of the circles.

Of course, I'm leaning heavily toward the CSS method, but how supported is CSS opacity?

Also, while we're on the subject, is there any method for JS image swapping cleaner than SimpleSwap [snip]? Can you think of any any drawbacks to using this method (support, etc.)? (This question's unrelated to the poll; I don't mean to ask if this method would be better than adjusting the opacity via CSS, but whether there's a better way of actually performing a swap.)

Thanks all!

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 5:02 pm (utc) on June 28, 2005]

[matthewwithanm]

Well...I've coded both ways. As expected, the CSS looks neater. What I didn't expect, however, was for SP2's security to yell about the CSS version! (Apparently, using the alpha filter - IE's equivalent of opacity - is a security risk.)

BTW, sorry about the URL.

[tomda]

Regarding your second question, have a look at [webmasterworld.com...]

[matthewwithanm]

Sorry, I may be a little dense...Do you think that method is cleaner than SimpleSwap? I don't.

[tedster]

1. SimpleSwap depends on a custom attribute - so the html won't validate. Still, it does work and is very lean.

2. One issue with javascript rollovers is that IE handles the swapped images very poorly, going back to the server instead of the cache and introducing latency in the rendering which is quite noticable for dial-up users. This alone means that CSS is better from a practical stand point. I also would not use opacity, but rather create an image that just "appears" to be more transparent.

3. CSS can create rollover effects by using a hover behavior - and that means even people with javascipt turned off can see them.

4. And finally, for the javascript approach, you may get some ideas from this thread:

Bare Bones Rollovers [webmasterworld.com]

[matthewwithanm]

Thanks tedster. Using CSS AND different images had somehow slipped my mind. You're right, of course...that would take care of most compatibility and validation issues at the same time.