Смена картинки по наведению курсора мыши 5 секунд

[ugin_root]

Gozar,
т.е. если это например img или input которые не могут иметь вложений то всё сработает как нужно?
а если событие повешено например на дивку внутри которой ещё одна (но находящаяся за пределами родительский например margin-left:-200px; ) то при отводе курсора от дочернего, событие onMouseOver сработает и у родителя? (не охота тестить на разных браузерах, тем более если кто-то уже это знает)

[dmitriymar]

Gozar,
та лад,ты усложняешь. ему ведь нужно над опр картинкой. итого при заходе отложенный по таймеру на 5 сек. при уходе отменять таймер. сложность если отработал то отмена -может вызвать ошибку-через кетчь его отменять

[Gozar]

mouseout обычно срабатывает если внутри контейнера что то лежит и мышь переходит на это что-то(элемент).

Тут два выхода, видится мне. Либо убираем из контейнера всё и делаем через background: картинка, либо через mouseleave, можно jquery подтянуть. Другие варианты сложнее, поэтому забил на них.

[Gozar]

Gozar,
та лад,ты усложняешь.

Ну может быть. По идее тэг img не нужен

[MironM]

В общем нашел решение на CSS со спаном.
Работает неплохо, но немного не то что нужно, а именно - когда выводится вторая картинка, то первая не убирается, а остается в фоне и если вторая меньше размером чем первая, то выглядит криво.

Короче говоря был бы рад решению на JS, кто сделает - получит немного вмр на пиво

Повторю задание:
Есть картинка N1
Есть картинка N2

Нужно чтобы когда человек наводил курсор на картинку N1, то она через 5 секунд менялась на картинку N2 (желательно плавно)

Если курсор "простоял" на картинке менее 5 секунд, значит отменяем смену картинки.

[Gozar]

Вмр не деньги, пиво я не пью, немного - это мало. Я пас.

[dmitriymar]

получит немного вмр на пиво

у нас пиво за вмр не купишь,тем более ящичное.да и пиво у нас не ахти. тоже пас

[melky]

немножко с jquery из-за анимаций

<div style="border:1px red dashed; padding:4px; position:absolute;">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" to="http://javascript.ru/img/webstorm.png">
</div>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
<script>
var timer;

$("div").hover( function(){
    
    var img = $("img", this);
    
    timer = setTimeout(function(){
        img.fadeOut("slow",function(){
           img.attr('src', img.attr("to") ).fadeIn();  
        });
    }, 5*1000);
    
}, function(){
    clearTimeout( timer );
});
</script>

[MironM]

melky, здесь пробую - работает нормально, у себя - не пашет. Просто лицезрю картинку в диве, а когда навожу курсор - ничего не происходит...

[melky]

тут тоже картинка в диве


тогда киньте html двух таких картинок.