title: jquery grayscale on hover
body: <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>