How to Set A Webpage in gray scale color Mode while clicking a Button

In my website I'm using a lot of images, tables, and fonts with different colors inside one div tag. When the user clicks a button the whole webpage should change to a grayscale color mode. In that mode the user should still be able to use the page.

In IE I'm using

filter:progid:DXImageTransform.M开发者_运维问答icrosoft.BasicImage(grayscale=1);

Which works fine, but it's not working in Mozilla Firefox.

I found this link. They only provide a script for converting an image into grayscale. But I need to convert a full div tag, containing many things like images, fonts & so on.

Thanks In Advance..

You can try using canvas :

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

or use a separate css something like this : body class="color" body class="bw"

and define "bw" in your css

for all the images you change the source with javascript : src=foo.jpg src=foo_bw.jpg