Using javascript to show a grey-scale version of an image on mouse-over

Question

I need a way to display a grayscale version of an image on mouseover. I've seen this implemented using the Canvas functionality of the browser but don't want to use that method as it will be a while before canvas is implemented on all browsers.

Has anyone done such a thing?

Answer 1

If you don't use Canvas and dont want to utilize browser-specific features, you are going to need to generate your grayscale images on the server. Either beforehand or on demand. How to do That has been answered elsewhere on SO

Answer 2

Assuming, as reko_t has commented, you can't just create grey scale versions of the images on the server for some reason, it's possible in IE using the proprietary filter CSS attribute, BasicImage with grayScale. You don't need JS to do this, it can be declared in CSS:

a {
    display: block;
    width: 80px;
    height: 15px;
    background-image: url(http://www.boogdesign.com/images/buttons/microformat_hcard.png);
}
a:hover {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

In Firefox, you could apply an SVG mask, or you could try using the canvas element.

However, the simplest solution may be to either manually create grey scale versions of your images, or do it server side with something like GD.

Answer 3

Found on the net:

HTML 5 introduces Canvas object which can be used to draw and manipulate images

The Script:

function grayscale(image, bPlaceImage)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  //  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);

  // This function cannot be called if the image is not rom the same domain.
  // You'll get security error if you do.
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);

  // This loop gets every pixels on the image and 
    for (j=0; j<imageData.height; i++)
    {
      for (i=0; i<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)/3;      
        imageData.data[index]=average;    
         imageData.data[index+1]=average;
         imageData.data[index+2]=average;
         imageData.data[index+3]=alpha;       
       }
     }

    if (bPlaceImage)
    { 
      var myDiv=document.createElement("div"); 
         myDiv.appendChild(myCanvas);
      image.parentNode.appendChild(myCanvas);
    }
    return myCanvas.toDataURL();
  }

The usage:

<img id="myImage" src="image.gif" 
   onload="javascript:grayscale(this, true);"></img> 

Tests Passed Using:

• FireFox 3.5.4
• Chrome 3.0
• Safari 4.0

Tests Failed Using:

• Internet Explorer 6
• Internet Explorer 7

Resources: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html