Image Rollovers?

[duncanhall]

So everyone knows them, and there's millions of scripts out there that will do it one way or another.

Recently though, I've been feeling a little "dirty" using javascript where it's merely for presentational purposes and it's somewhat putting me off the idea after about 5 years of it being absolutely standard.

So, anyone got some defense for JS on this, and more importantly, know of a particularly good script to use?

Or even better, anyone found any reliable CSS image rollover techniques?

[simplistik]

Ummmm what's the problem? Why would you need to use javascript? Basically what you do is create your button(s) with all it's individual states, all on one gif, jpg, or png, pick your poison. This allows for easy to use css manipulation as well as loads the "rollover" along with everything else. So for example, lets use:

http://img49.imageshack.us/img49/2026/buttoncr5.gif

the total height is 66px, which means each individual section is 22px so when you create your link you do something like:



a { width: 48px; height: 22px; display: block; background: transparent url('button.gif') no-repeat 0 0; }
a:hover { background-position: 0 -22px; }
a:active { background-position: 0 -44px; }


Here's an example
http://dev.beyondthepixel.com/examples/css_rollover/

You'll note that because you're using an image as a background, I include title into the anchor, since generally you'd use an alt and/or title tag for an image this is the replacement for that.

The other thing is that, the alt image and the image itself would read the name of the image and it's alt / title tag on a screen reader... but since none of that exists here it's important to use a descriptive replacement and then hiding it from display, hence the .invis class used.

This is how a screen reader would see it:
http://www.loband.org/loband/filter/com/beyondthepixel/dev/%20/examples/css_rollover/?_ab_request=Go

You can also see it passes 508 compliance (http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&url1=http%3A%2F%2Fdev.beyondthepixel.com%2Fexample s%2Fcss_rollover%2F) as well as xHTML validation (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdev.beyondthepixel.com%2Fexamples %2Fcss_rollover%2F).

[duncanhall]

Legend, thanks!

I've always been a bit dubious of straight CSS for image rollovers, but thinking about it, I can't think why. I guess I just assumed there'd be horrendous compatibility issues.

Cheers.

[thats all folks]

Great example Simp!

[Zaid_W1red]

That...is awesome :)