jquery grayscale on hover
<p>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.</p>

<p>thanks</p>

<p>EDIT - SEMI WORKING CODE...:</p>

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

&lt;script type="text/javascript"&gt;
$(document).ready(function() {

   var img = $(".test img")

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

});
&lt;/script&gt;
</code></pre>

<p>and</p>

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

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

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

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