Having an image black and white to full color via rolloever with CSS, possible?

Hello as you can see with my header on my site there are image rollovers from black and white to full color.

http://www.YayFreeGames.com

I was wondering with CSS can I acheive this same rollover effect, from black and white to full color without using the messy image rollovers javascripts.

Thank you!
-Doug

 

http://www.designmeme.com/articles/cssrollovers/

 

This will be great MediaHustler; the CSS will work with gecko-browsers. Currently, I only see B&W images on yayfreegames.com with FireFox : (

 

If you hover over it should turn to color.

=)

 

I'm not the most experienced with roll over, but if you combine :hover with the 'hidden' attribute for two different versions of the image (one black and white, one color), it should work.

 

If i were you i would create divs for each images with the same width and height attribute as the images have. If you define different classes for them you will be able to specify a hover state background-image for each divs.
I guess it should work.

 

Nope. My FF version is 1.5.0 mouse does nix (though I can click fine).

Edit: I had also checked with my crippled IE (I'm running Linux so I'm using WINE) and I saw the cool color highlight change thingie. It does look very cool. Transparent gifs. Can't wait for browsers to learn to see PNGs (and by browsers I'm arching an eyebrow at IE specifically) so we's can use semi-transparencies!

 

Don't use hidden divs or none of that stuff. Here's the correct CSS image rollover method: http://www.monkeyflash.com/css/image-rollover-navbar/

Basically you make both states (plain/hover) as one image. Then you simply reposition its display via the background-position property so it shows the "rest" of the image on hovers. That also gets rid of the need for preloading the hover images via JS.

 

That's a slightly old FF version. =)

 

^Yeah, though I guess lots of people didn't move to FF2.