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?

meo · Accepted Answer · 2011-11-18T13:37:09.583

6

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

edited Nov 18 '11 at 13:37

answered Nov 17 '11 at 20:15

meo

30,872
17
87
123

ah - nice! How do you resaturate though? – mheavers Nov 17 '11 at 20:18
i would just cover the original image with the desaturated version. – meo Nov 17 '11 at 20:23

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

1 Answers1