jquery grayscale on hover

Question

does anyone know whether there is a way to make an image grayscale on hover - other than by creating 2 separate images and altering the src.

thanks

EDIT - SEMI WORKING CODE...:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="scripts/pixastic-1.custom.js"></script>

<script type="text/javascript">
$(document).ready(function() {

   var img = $(".test img")

   $('.test').hover(function() { 
       $('img', this).pixastic("desaturate");
   }, function() {
       $(this).html(img);
   });

});
</script>

and

<div class="test" style="padding:25px; width:200px; background-color:#F96">
  <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" />
</div>

How can I amend this to work if there is more than one div on the page... like this...

<div class="test" style="padding:25px; width:200px; background-color:#F96">
  <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" />
</div>

<div class="test" style="padding:25px; width:200px; background-color:#F96">
  <img class="pic" src="images/home/mainImage/another_image.jpg" width="100" height="100" alt="" />
</div>

Answer 1

You may want to check this demo: http://www.sohtanaka.com/web-design/examples/hover-over-trick/

Answer 2

Best solution is the one suggested by @Alec, with the <canvas> tag. Another one is very tricky and altough it's more cross-browser compatible, I don't know how well it works for larger images. That would be making an AJAX call on hover to a PHP script, sending the image URL as a parameter and having the PHP script return the grayscale image. If you need more details I'll write a short script for you.

Answer 3

As an alternative to jQuery but not ajdusting the actual image source or having 2 images, I think its possible to make an image greyscale within flash with a simple flash movie that handles the mouse over etc.

This looks like good value: http://www.flashcomponents.net/component/as2_luminosity_gray_scale_utility.html

[Not affiliated with this component at all...]

Answer 4

Here is one solution for using "one" image, as you´ll obviously see, its actually two images stuck together, I´m not sure if this helps, hope it does!

BTW no jQuery, just css

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>

CSS:

.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/myImage.png') bottom;
    text-indent: -99999px;
}
.myButtonLink:hover {
    background-position: 0 0;
}

source:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

Answer 5

Try one of these (both use canvas):

1. javascript image processing library - desaturate
2. Desaturate tutorial