how to make grayscale with CSS or jQuery?

[chirag]

Hello,

i want to grayscale image by css or jQuery if any one know plz help me

i need to help also hover stage i found one filter but it’s only work in ie :(

This is i found it (it’s work only ie)

<img src="http://www.mediabistro.com/agencyspy/original/gossip_girl.JPG&quot; class="myimg" width="800" height="600" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)’" onmouseout="this.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)’">

[davesgonebananas]

The problem is that there is no really cross-browser solution to this. The filter solution only works in Microsoft browsers. There is a canvas solution that only works in browsers that support HTML5 Canvas.

By far the best way would be to use a PHP script to convert the images to grayscale http://php.about.com/od/gdlibrary/ss/grayscale_gd.htm – since it will work in all browsers.

[Author]

Posts