Color Image -> Grayscale on Hover

JavaScript
1

I’ve been trying to figure out how to make a grayscale hover effect using one image (no sprites).

I’ve come across the following demo:

But that changes the image upon clicking the button. Is it possible to change this to do it upon image hover?

Thank you for your time.

2

Ther example on ajaxblender creates a Canvas element with the colour version of the image and then modifies it to be grayscale. Of course, this could be done on hover rather than click as well.

Web Designer Wall has a tutorial on this that might be helpful: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover