// Функция для "остальных" браузеров
  // Которая и делает преобразование
  function grayscale(image, bPlaceImage){
    // Создаём объект типа canvas.2d
    var myCanvas=document.createElement("canvas");
    var myCanvasContext=myCanvas.getContext("2d");
    // Делаем его размером с нашу картинку
    var imgWidth=image.width;
    var imgHeight=image.height;
    myCanvas.width= imgWidth;
    myCanvas.height=imgHeight;
    // Пихаем картинку в наш объект
    myCanvasContext.drawImage(image,0,0);
    // Заганяем попиксельно картинку в матрицу
    var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
    // Теперь в цикле, каждый пиксель мы делаем ч/б
    for (i=0; i<imageData.height; i++){
      for (j=0; j<imageData.width; j++){
        var index=(i*4)*imageData.width+(j*4);
        var red=imageData.data[index];
        var green=imageData.data[index+1];
        var blue=imageData.data[index+2];
        var alpha=imageData.data[index+3];
        var average=(red+green+blue)*0.3333;
        // Оставляем прозрачность и делим на среднее от RGB
        imageData.data[index]=average;
        imageData.data[index+1]=average;
        imageData.data[index+2]=average;
        imageData.data[index+3]=alpha;
      }
    }
    // Получаем чёрно-белую картинку
    myCanvasContext.putImageData(imageData,0,0,0,0,imageData.width, imageData.height);
    // Вставляем чёрнобелую картинку
    // От параметра зависит куда вставляем
    // Либо рядом в div-ку, либо отдаём через return
    if (bPlaceImage){
      var myDiv=document.createElement("div");
      myDiv.appendChild(myCanvas);
      image.parentNode.appendChild(myCanvas);//, image);
    }

    return myCanvas.toDataURL();
  }

  // Функция, что делает картинку ч/б и при наведении мыши возвращает
  // нормальное состояние
  function MakeGSImage(image){
//    alert('H A L L O');   
    // если испортил (только у него есть фильтр)
    if (typeof image.style.filter != "undefined") {
      // объект должен иметь лаяут
      image.style.zoom = 1;
      // делаем ч/б используя фильтр grayscale=1
      image.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
      // вешаем тригеры мыши
      image.onmouseover=function(){
        this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
      }
      image.onmouseout=function(){
        this.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
      }
    } else {
    // для функции grayscale практически идентично %)
      image.mouseOverImage = image.src;
      image.onload = function(){return true;};
      image.normalImage = grayscale(image, false);
      image.onmouseover =function(){this.src = this.mouseOverImage;}
      image.onmouseout = function(){this.src = this.normalImage;}
      image.src = image.normalImage;
    }
  }