Прототип исчезает черно-белым цветом при наведении мыши

Question

Я хочу иметь изображение, которое изначально будет черно-белым, но когда я наведу на него курсор, оно исчезнет в цветном изображении.

Я нашел, как сделать это с jQuery, но я не очень хорош с прототипом, и я не могу понять, как преобразовать код для работы с библиотекой Prototype. Кто-нибудь может мне помочь, пожалуйста?

Вот функция jQuery:

<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>

Вот 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>

И вот код тела:

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

Спасибо, что нашли время, чтобы помочь парню!:D

Answer 1

Попробуй это:

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

Несколько примечаний:

Эффекты или анимации в Prototype выполняются с помощью дополнительной библиотеки http://script.aculo.us/

Document.observe выполняет код, как только DOM готов.

Параметры продолжительности каждого эффекта обрабатываются с помощью свойства duration.

Эффекты добавляются в конец глобальной очереди, поэтому, если кто-то наведет курсор мыши, а затем быстро наведет мышью, произойдет постепенное исчезновение цвета, а затем оно снова станет черно-белым. Потребовался бы дополнительный код, чтобы прервать постепенное исчезновение, чтобы окрасить, и исчезнуть оттуда к черному.