Смена картинки по наведению курсора мыши 5 секунд
Доброго времени суток.
Такая задача: Есть картинка N1 Есть картинка N2 Нужно чтобы когда человек наводил курсор на картинку N1, то она через 5 секунд менялась на картинку N2. Если курсор "простоял" на картинке менее 5 секунд, значит отменяем смену картинки. Есть идеи? |
Цитата:
http://javascript.ru/clearTimeout |
Не то. Я пробовал это уже.
С таким методом если наводишь курсор на картинку, то она в любом случае поменяется через заданное время. |
|
Чувствую своей головой я не доделаю этот скрипт :)
Вот что есть :
<script language="JavaScript">
if (document.images) {
img_on =new Image(); img_on.src ="images/logo.png";
img_off=new Image(); img_off.src="images/logo2.png";
}
function handleOver() {
if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
if (document.images) document.imgName.src=img_off.src;
}
</script>
<a href="#" onMouseOver="setTimeout('handleOver();return true;', 2000)" onMouseOut="handleOut();return true;"><img name="imgName" src="images/logo.png"/></a>
|
Цитата:
Просто проверяй по прошествии 5 сек, если под курсором то, что нужно то выполняемся, если нет, то ничего не делаем. |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<script>
var img = '';
function loadImage(){
im=document.getElementById('im');
im.setAttribute('src','http://ssl.gstatic.com/onebox/weather/60/light_rain.png');
}
</script>
<img id="im" src="http://ssl.gstatic.com/onebox/weather/60/sun.png" onMouseOver="img=setTimeout(loadImage, 2000)" onMouseOut="clearTimeout(img);">
</body>
</html>
|
И получишь криво работающий говнокод.
Нужно проверять что мышь над элементом, а не надеяться что mouseout сработает. |
Gozar,
можно правильный пример? а onMouseOver может не сработать? |
Цитата:
Можешь не верить на слово, тем более что скрипт нужен не тебе. Одно могу сказать точно, что mouseout вешать на контейнеры с вложениями нельзя(можно, но не стоит). У тс контейнер а. |
Gozar,
т.е. если это например img или input которые не могут иметь вложений то всё сработает как нужно? а если событие повешено например на дивку внутри которой ещё одна (но находящаяся за пределами родительский например margin-left:-200px; ) то при отводе курсора от дочернего, событие onMouseOver сработает и у родителя? (не охота тестить на разных браузерах, тем более если кто-то уже это знает) |
Gozar,
та лад,ты усложняешь. ему ведь нужно над опр картинкой. итого при заходе отложенный по таймеру на 5 сек. при уходе отменять таймер. сложность если отработал то отмена -может вызвать ошибку-через кетчь его отменять |
mouseout обычно срабатывает если внутри контейнера что то лежит и мышь переходит на это что-то(элемент).
Тут два выхода, видится мне. Либо убираем из контейнера всё и делаем через background: картинка, либо через mouseleave, можно jquery подтянуть. Другие варианты сложнее, поэтому забил на них. |
Цитата:
|
В общем нашел решение на CSS со спаном.
Работает неплохо, но немного не то что нужно, а именно - когда выводится вторая картинка, то первая не убирается, а остается в фоне и если вторая меньше размером чем первая, то выглядит криво. Короче говоря был бы рад решению на JS, кто сделает - получит немного вмр на пиво :) Повторю задание: Есть картинка N1 Есть картинка N2 Нужно чтобы когда человек наводил курсор на картинку N1, то она через 5 секунд менялась на картинку N2 (желательно плавно) Если курсор "простоял" на картинке менее 5 секунд, значит отменяем смену картинки. |
Вмр не деньги, пиво я не пью, немного - это мало. Я пас.
|
Цитата:
|
немножко с 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>
|
melky, здесь пробую - работает нормально, у себя - не пашет. Просто лицезрю картинку в диве, а когда навожу курсор - ничего не происходит...
|
тут тоже картинка в диве
тогда киньте html двух таких картинок. |
Я имел в виду вашу картинку в диве.
В общем при наведении ничего не происходит, хоть куда вставляю на странице... |
Цитата:
этот пример работает без jQuery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<script>
var img = '';
function loadImage(){
im=document.getElementById('im');
im.setAttribute('src','http://javascript.ru/forum/image.php?u=11&dateline=1306080557');
}
</script>
<img id="im" src="http://javascript.ru/forum/image.php?u=2722&dateline=1244616894" onMouseOver="img=setTimeout(loadImage, 2000)" onMouseOut="clearTimeout(img);">
</body>
</html>
|
ugin_root, вроде работает, спасибо.
Оставь кошель и аську в личку (на всяк случай, вдруг чего еще понадобится) |
| Часовой пояс GMT +3, время: 22:38. |