jquery - Prototype fade black and white to color on mouseover -

i want have image black , white, when hover on it, fade color image.

i found how jquery, i'm not prototype , can't figure out how convert code work prototype library. can me out please?

here 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 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 body code:

<div class="fadehover"> <img src="cbavota-bw.jpg" alt="" class="a" /> <img src="cbavota.jpg" alt="" class="b" /> </div> 

thank taking time 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 done via additional library called scriptaculous

the document.observe executes code once dom ready.

the parameters how long run each effect handled via duration property.

the effects added end of global queue, if mouses on , mouses out, fade color happen , fade black , white. take additional code make abort fade color , fade there black.