javascript – How can you desaturate an image but cross-browser?

Question:

 $('img').hover(function(){
    $(this).toggleClass("grayscale")
});
body{
    padding: 50px 10px;
}
img{
    border: 10px solid #ccc;
    box-shadow: 0px 0px 1px #555;
}
img.grayscale{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<a href="#" title=""><img class="grayscale" src="http://farm9.staticflickr.com/8380/8464961316_bff336e8b1.jpg" width="480" height="246" alt=""></a>
</div>

I have been looking for this effect for a long time and is really cross-browser, but how can I make the image black and white in js and become colored with hover? Or still use two images?

Answer:

After all, it can be easier to do:

img:hover{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}
Scroll to Top