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"></script>
<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

Try one of these (both use canvas):

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