Prototype fade black and white to color on mouseover

I want to have an image that would initially be black and white, but when I hover over it, it would fade into the color image.

I found how to do it with jQuery, but I'm not very good with prototype and I can't figure out how to convert the code to work with the Prototype library. Can anyone help me out please?

Here is the jQuery function:

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

Here is the CSS:

<style>
div.fadehover { position: relative; }
img.a { position: absolute; left: 0; top: 0; z-index: 10; }
img.b { position: absolute; left: 0; top: 0; }
</style>

And here is the body code:

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b开发者_运维百科" />
</div>

Thank you for taking your time to help a fella out! :D

---

Try this:

document.observe( 'dom:loaded', function()
{
    $$( 'img.a' ).first().observe( 'mouseover', function() { new Effect.Opacity( this, { duration: 1.5, from: 1, to: 0, queue: 'end' } ); } )
        .observe( 'mouseout', function() { new Effect.Opacity( this, { duration: 1.5, from: 0, to: 1, queue: 'end' } ); } );
} );

A few things of note:

The effects, or animations, in Prototype are done via an additional library called Scriptaculous

The document.observe executes the code once the DOM is ready.

The parameters for how long to run each effect are handled via the duration property.

The effects are added to the end of the global queue, so if someone mouses over and then quickly mouses out, the fade to color will happen and then it will fade back to black and white. It would take additional code to make it abort the fade to color and fade from there to black.