greyscale2

function makeGrayScale( image ) {
  var canvas = document.createElement("canvas"),
      context = canvas.getContext("2d"),
      imgWidth = image.width,
      imgHeight = image.height;
  canvas.width = imgWidth;
  canvas.height = imgHeight;
  context.drawImage( image, 0, 0 );
  var imageData = context.getImageData( 0, 0, imgWidth, imgHeight ),
      picture = imageData.data,
      i, n;
  for (i = 0, n = picture.length; i < n; i += 4) {
    var grayscale = picture[i  ] * .3 + picture[i+1] * .59 + picture[i+2] * .11;
    picture[i  ] = grayscale; 	// red
    picture[i+1] = grayscale; 	// green
    picture[i+2] = grayscale; 	// blue
  }
  context.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

function greyScale( images, hoverRevert ) {
  $( images ).each(function() {
    if( Modernizr.canvas && Modernizr.dataUri ) {
      var that = this,
          orgSrc = this.src;
      $(this).bind( "load", function(){
        var newSrc = makeGrayScale( that );
            that.src = newSrc;
        if (hoverRevert) {
          $(this).parent().mouseout(function(){
            that.src = newSrc;
          }).mouseover(function(){
            that.src = orgSrc;
          });
        }
        $(this).unbind("load");
      });
    } else if( $( 'html' ).hasClass( 'ie' ) ) {
      this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
      if (hoverRevert) {
        $(this).parent().mouseout(function(){
          this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
        }).mouseover(function(){
          this.style.filter = '';
        });
      }
    } else {
      // super fallback
    }
 });
}

Needs Jquery, modernizr and https://gist.github.com/745404 to work right. I'll be removing the need for modernizr and jquery shortly.