Jquery hover grayscale

Question

Jquery hover grayscale

Does anyone know if there is a way to make the image appear in grayscale on hover - besides creating two separate images and changing 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 change this to work if the page has more than one div ... 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>

+4

jquery

Tom Oct 9 '10 at 15:21

source share

5 answers

The best solution is the proposal suggested by @Alec, with the <canvas> . Another very difficult question, and although it is compatible with multiple browsers, I don’t know how well it works for large images. This will lead to an AJAX call when you hover over a PHP script, sending the image URL as a parameter and receiving the PHP script return the image in grayscale. If you need more information, I will write a short script for you.

+1

Claudiu Oct 9 '10 at 15:27

source share

As an alternative to jQuery, but not in order to create a real image source or have 2 images, I think that it can be made a grayscale image within flash memory using a simple flash movie that processes the mouse, etc.

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

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

0

Mark redman Oct 9 '10 at 15:36

source share

Here is one solution for using the "single" image, as you will obviously see, in fact the two images are glued together, I'm not sure if this helps, I hope that this happens!

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; }