Removing colors from image?

[ryeman98]

I was wondering if this could even be done in Javascript and I'm not sure how to go about it. I want to display navigation using images (logos) and I want it to work like this:

 

There are multiple logos in a row, all with color. The user hovers their cursor over one of the logos and as soon as they hover, the logo goes colorless.

 

Thanks in advance,

Rye

[nogray]

Javascript can't change the images, for this you need to make 2 images for each (colored and gray scale) when the mouse is over the image, swich the source to the grayscale and when the mouse is out use the color version.

 

Also, you can make them as links with a style sheet that change the background colors when the mouse is over the image.

[mainewoods]

<img src="image.gif" width="88" height="31" style="filter:gray">

http://www.xentrik.net/css/filters.php

don't know if it will work, but you can try:

<img id="myimage" src="image.gif" width="88" height="31">
<script>
    document.getElementById('myimage').style.filter = 'gray';
</script>

[mainewoods]

use this code instead of the code above(added '()' after 'gray'). this  works in ie, but not ff

<img src="image.gif" width="88" height="31" style="filter:gray()">

http://www.xentrik.net/css/filters.php

<img id="myimage" src="image.gif" width="88" height="31">
<script>
    // turn on
    document.getElementById('myimage').style.filter = 'gray()';
    // turn off
    document.getElementById('myimage').style.filter = '';
</script>