Tuesday, December 22, 2009

Gray Scale images in all Browsers


Its been a while since I blogged on anything.
Today I came across a post at forums.asp.net: change color image to gray scale

GrayScale - Converts the colors of the object to 256 shades of gray.
An example will be



Since GrayScale filter is a filter present in the Internet Explorer,
we can achieve this result in IE simply by using the css property
.greyscale_filter{ 
 filter: gray;
}
or
.greyscale_filter{
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
Here the second method is more advanced and must have Internet Explorer 5.5 or later to work properly.

There are number of filters in IE apart from GrayScale. Here are some lists

1. Static filters by MSDN
2. CSS Visual Filters
3. IE Multimedia filters reference


This is the case with Internet Explorer.
Now the big question.

Why does not the GrayScale filter work with browsers like Chrome, Firefox and Safari?
Simple. The filter is specific to IE only.

While I was searching through the internet for a good solution, I found this at SO
There I discovered a wonderful javascript coder named James Padolsey who is just 19!

Copied his GrayScale.js which according to James Padolsey is

Grayscale.js is an experimental attempt to emulate Microsoft's
proprietary 'grayscale' filter (available in most IE versions).

And it worked like a charm.

So here are the steps involved in achieving the hover effect

1. Grab the GrayScale.js from James Padolsey's site. (The link is here)

2. Add refernce to jQuery. Please note that jQuery is not required for grayscale.js - it's only used for this demo
Its better to refer jQuery like this (Read Dave Ward ka Encosia on this topic)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  
than
<script type="text/javascript" src="/js/jQuery.min.js"></script>
  
3. Add a small javascript snippet like this
$(document).ready(function(){
     $('img.greyonhover').hover(function(){
    grayscale(this);
   }, function(){
    grayscale.reset(this);
   })
  });
  
4. Assign the class="greyonhover" for the image you want to implement grayscale effect onhover
<img class="greyonhover" src="images/naveenj-thumb.jpg" />
  

This is all you have to do to achieve greying effect on hover. Download Source Code(9k)

Related Posts :



7 comments on "Gray Scale images in all Browsers"

Add your comment. Please don't spam!
Subscribe in a Reader
Richard on June 24, 2010 at 11:40 PM said...
This comment has been removed by a blog administrator.
Paul on August 6, 2010 at 2:12 AM said...

Hi Naveen,

great blog!! still I am trying to get this the other way around: have images grayscale when loaded, and onhover have it in original color. Any ideas on how to adjust the code? I have tried but to no avail yet:(

Sean Boone on February 27, 2011 at 5:30 PM said...

I'm also wanting to start off grayscale, hover to full color. Do you know the fix for this?

Serch on March 25, 2011 at 2:28 PM said...

Hi Naveen,

I've put this grayscale example in my code and it works pretty well in IE but in other browsers like Firefox or Chrome it doesn't go as smooth as it goes in IE. Do you know the reason??

mcbobo on January 19, 2012 at 12:13 AM said...

Doesn't work for me in chrome 16

Onur Omer Ozturk on April 26, 2012 at 11:41 PM said...

in order to use it reverse (grayscale load and then color on mouse over use the script below:

$(function () {
// fade in the grayscaled images to avoid visual jump
$('img.greyonhover').hide().fadeIn(50);
});
$(window).load(function () {
$('img.greyonhover').each(function () {
grayscale(this);
})
});
$(document).ready(function () {
$('img.greyonhover').hover(function () {
grayscale.reset(this);
}, function () {
grayscale(this);
})
});

Gamer on April 28, 2017 at 8:35 PM said...

This is a great post. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again. UC mini for android

Post a Comment