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?
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?
Share Improve this question edited Jan 1, 2016 at 18:20 void 36.7k10 gold badges69 silver badges111 bronze badges asked Oct 29, 2009 at 13:04 Gaurav SharmaGaurav Sharma 4,05214 gold badges47 silver badges73 bronze badges 1- 2 You mean without pre-generating the gray-scale image on the server side first? – reko_t Commented Oct 29, 2009 at 13:05
4 Answers
Reset to default 3Assuming, as reko_t has mented, 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./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.
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
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./tutorial/jsCanvasGrayscale/index.html
img {
mix-blend-mode: luminosity;
background: #000;
}