html / javascript - desaturate / grayscale image rollovers without creating an image duplicate or sprite

Question

I want to do a grayscale to color image rollover on my images, but I don't want to use a technique that requires creating a duplicate of the image, and I want to avoid sprites. Is this possible? How would I go about doing this?

Answer 1

it is possible using canvas and some JS. here is an working example: http://jsfiddle.net/meo/csbaf/

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html (you will need to preload the images...)

PS: there is even a fallback for IE