Как обесцветить изображения на сайте?

[7Rei]

Добрый вечер.
Необходимо на сайте все изображения сделать черно-белыми, и чтобы при наведении они становились цветными.
Вариант, с подстановкой заранее подготовленных изображений через ксс не подходит, так как изображений много.

В поиске нашел такой вариант:
<a href="http://fantasyflash.ru">
<img src="http://fantasyflash.ru/avatar/ava_cat/image/cat31.jpg"
style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"
onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'"
onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'">
</a>

К сожалению работает только в ие.
Кто нибудь стакивался с подобной задачей?

Спасибо. С Ув.

[AlterEgo]

Для остальных можно использовать canvas
Вот пример:_http://deer.org.ua/2009/11/15/1/
Или поискать в Google по ключевым словам: javascript grayscale image
Есть ещё решения на основе SVG и VML. Но там свои ограничения.

[strannik-yura]

Для остальных можно использовать canvas
Вот пример:_http://deer.org.ua/2009/11/15/1/
Или поискать в Google по ключевым словам: javascript grayscale image
Есть ещё решения на основе SVG и VML. Но там свои ограничения.

этот тоже работает только в IE

[volod3000]

Вот готовое решение в виде плагина

[AlterEgo]

этот тоже работает только в IE

Когда это canvas стал работать только в ie? Насчет фильтра grayscale не спорю. Поэтому и предлагается совместить оба метода.

[volod3000]

Вот способ работает на все 100:

Создаем два php файла 1.php и 2.php

1.php :

Код

function show_grayscale($filename){
  $img_size = GetImageSize($filename);
  $width = $img_size[0];
  $height = $img_size[1];
  $img = imageCreate($width,$height);
  for ($c = 0; $c < 256; $c++) {
    ImageColorAllocate($img, $c,$c,$c);
  }
  $img2 = ImageCreateFromJpeg($filename);
  ImageCopyMerge($img,$img2,0,0,0,0, $width, $height, 100);
 
  header("Content-type: image/jpeg");
  imagejpeg($img);
 
  imagedestroy($img);
}
 
echo $mim = show_grayscale("77.jpeg");

2.php :

Код

echo '<script type="text/javascript">
function chen_sec()
    {
       document.images.myimage.src = "77.jpeg";
	}
function chen_fir()
    {
       document.images.myimage.src = "1.php";
	}
</script>';
 
 
echo '<img id="myimage" src="1.php"  onmouseover="chen_sec()" onmouseout="chen_fir()" />';
 

Файл 1.php делает изображение черно-белым, а файл 2.php совершает подмену.