Using javascript to fade a thumbnail image from grayscale to to color

Question

I'm relatively new to web development and wouldn't even know where to start in coding a javascript that fades a grayscale thumbnail image into a color thumbnail image on mouseover, and vice versa on mouseoff (<--or whatever this is called).

I've looked all over and can't find a script that does this. Is this possible? Could I use jquery to do this? Other thoughts?

Thanks so much in advance for all your help!

Answer 1

I think all you could do is load two thumbnails into a container at once, with the black and white laying over top of the colour. Then, you could use jquery to fade the opacity of the to thumbnail to 0.0. Here is a working example (it just uses a click to change it once, but I'll leave the mouseover / mouseout to you - you may want to speed up the animation):

some html:

<div class="container">
  <img src="blackandwhite.jpg" class="bw" />
  <img src="colour.jpg" class="colour" />
</div>

some css:

.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }

some jquery:

$(function() {
    $(".bw").click(function() {
        $(this).animate({ opacity: 0.0 }, 800);
    });
});

Answer 2

The best way to do this would be to actually have two versions of the image. One that's grayscale and one that's color. To keep it strictly within javascript and html, I don't believe there's any other way than with the two image method. Flash, Silverlight, and maybe even HTML 5, can do it easily.

Answer 3

Do you really want to fade, or just to swap?

Typically the swap is done via CSS

<a class="btn"></a>

and the CSS

a.btn {
    background: url(../images/button-image.png) no-repeat 0 0;
    width: 110px;
    height: 16px;
    margin: 10px 0 0;
}
a.btn:hover {
    background-position: 0 -16px;
}

In this case there's a little performance improvement going on where button-image contains both images vertically stacked, and the css is sliding the background image around, but it's the same idea. It's a performance enhancement because the browser only needs to download 1 image, not 2.