The main effect we want here is to have an image "ghosted" out when on the page, but if the visitor or user mouse's over the image, it should become full color. We can do this by changing the transparency of the image. The best part is, we can do this purely in CSS (Cascading Style Sheets) with no javascript.

Here is how it looks:

Klein Photography Sample Image

...and here is how it works.

The CSS style is as follows:

a.transImageLink img {
filter:Alpha(opacity=55);
-moz-opacity:0.55;
opacity:0.55;
border:none;
}
a.transImageLink:hover img {
filter:Alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
border:none;
}

Now all you need to do is assign the aforementioned CSS Class to the Image on your page:
<a href="http://www.klein-photography.com" class="transImageLink" target="_blank"><img src="webimages/kleinphoto.jpg" width="300" height="248" alt="Klein Photography Sample Image" longdesc="http://klein-photography.com" /></a>