Помогите с небольшим эффектом на JS. При наведении курсора..

[bayanruby2]

Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.

Есть две картинки. На экране видна одна картинка. При наведение на эту картинку она плавна переходит в другую.

Заранее спасибо!

[s0rr0w]

Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.

Есть две картинки. На экране видна одна картинка. При наведение на эту картинку она плавна переходит в другую.

Заранее спасибо!

Нужно нам или тебе? Нам это нужно станет тогда, когда у нас будет стимул в виде оттисков гравюр умерших американских президентов.

[bayanruby2]

Прошу помощи у Вас. Я этого делать не умею и если это не сложно, помогите пожалуйсто.

Edited May 26, 2012 by bayanruby2

[buddah]

Пример

<div id="pic">
    <img src="http://forum.htmlbook.ru/uploads/profile/photo-27140.jpg">
</div>?

#pic {
    background: url('http://forum.htmlbook.ru/uploads/profile/photo-23045.jpg') no-repeat;
    width: 150px;
    height: 140px;
}?

$("#pic").hover(function(){

    $(this).find("img").animate({opacity: 0}, 300);

}, function() {

    $(this).find("img").animate({opacity: 1}, 300);

});?

Магия в том, что вторая картинка - это фон у блока, который содержит первую картинку (img). При наведении img исчезает и мы видим фон блока.

Если обязательно нужно использовать теги img, тогда просто меняем при наведении атрибут src. То есть меняем ссылку на рисунок. Этот способ немного труднее, но расписывать не буду, в сети куча примеров.