Чтобы не делать два изображения - одно цветное другое черно-белое. Можно воспользоваться средствами CSS.
Сделаем, чтобы при наведении на картинку в ссылке цветное изображение менялось на черно-белое. Для этого в css файл добавим такой код:
a:hover img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
В тойже папке, где находится файл css c этим кодом, создадим файл grayscale.svg с таким содержанием
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="greyscale"> <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>
Это нужно для Firefox, иначе при наведении мышки на картинку, картинка исчезнет. Картинка исчезает очень ненадолго при первом наведении мышки, думаю, потому что нужно какое-то время чтобы этот файл закачался.
Поэтому можно добавить однопиксельную прозрачную картинку и сразу применить к ней фильтр.
Зададим для этой однопиксельной картинки класс blank, и добавим, соответственный, css код:
.blank{
filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
}