Zmiana obrazka z kolorowego na czarno biały

Cześć,
Mam obrazki kolorowe które wgrywam na storne. Chciałbym aby po odpaleniu strony były w kolorze czarno-białym a po najechaniu robiły się pomniejszone i kolorowe. Pomniejszenie mam, chodzi mi tylko o to aby na początku były czarno białe a po najechaniu kolorowe. Podmiana atrybutu src nie wchodzi w grę. Proszę o pomoc.

$(function() {
				$('.photo').hover(
					function(){
						$(this).find('img').stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
					},
					function(){
						$(this).find('img').stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
					}
				);
            });

http://blog.codovations.com/2009/12/gray-scale-images-in-all-browsers.html

działało by idealnie gdyby nie przecudowna przeglądarka IE ;) oraz chodzi mi o to aby domyślnie był czarno biały a po najechaniu robił się kolor a w tym przykładzie jest odwrotnie.

A nie lepiej mieć 2 osobne obrazki i je zamieniać w JS'ie lub w CSS'ie?

Może i lepiej ale pisałem w pierwszym poście że takie rozwiązanie mnie nie interesuje.

nie musisz kopiować kodu w 100% idealnie tak samo. przemyśl jak to działa, i zrób, żeby domyślnie był czarno-biały, a potem kolorowy :/

Udało mi się zrobić aby po najechaniu był kolor a po opuszczeniu czarno biały - zamieniłem funkcję tylko. Ale nie mogę zrobić aby na starcie były wszystkie zdjęcia czarno białe, takie coś nie pomaga:

.greyonhover{
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
}

Przeczytaj cały artykuł, który Ci wysłałem, a nie do momentu pierwszego code-listingu, żeby zrobić CTRL-C, CTRL-V :/
MYŚLENIE <---- potrzebujesz tego, do bycia programistą.

Anyway, korzystasz teraz z czegoś co działa tylko pod IE i naprawdę wróć się do tamtego artykułu i go PRZECZYTAJ.