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?

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