Каким образом можно обесцвечивания изображения но кроссбраузерно?

$('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,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); }

вот этот эффект я долго искал и действительно кроссбраузерный, но как на js сделать что бы изображение было чёрно белым а при hover становилось цветным? Или всё таки использовать два изображения?

Ответ

Можно ведь проще сделать:
img:hover{ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); }