Форум

MironM · #1 (**permalink**) 26.09.2011, 17:24

Доброго времени суток.

Такая задача:

Есть картинка N1
Есть картинка N2

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

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

Есть идеи?

Kolyaj · #2 (**permalink**) 26.09.2011, 17:27

Сообщение от MironM

Есть идеи?

http://javascript.ru/setTimeout
http://javascript.ru/clearTimeout

MironM · #3 (**permalink**) 26.09.2011, 17:31

Не то. Я пробовал это уже.
С таким методом если наводишь курсор на картинку, то она в любом случае поменяется через заданное время.

Serg_pnz · #4 (**permalink**) 26.09.2011, 17:35

http://javascript.ru/clearTimeout
Пример http://menu003.jcase.ru/

MironM · #5 (**permalink**) 26.09.2011, 17:44

Чувствую своей головой я не доделаю этот скрипт

Вот что есть :

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

Gozar · #6 (**permalink**) 26.09.2011, 17:52

Сообщение от MironM

Не то. Я пробовал это уже.

Попробуй ещё раз, потому что нет других счетчиков времени в js!

Просто проверяй по прошествии 5 сек, если под курсором то, что нужно то выполняемся, если нет, то ничего не делаем.

ugin_root · #7 (**permalink**) 26.09.2011, 20:27

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

Gozar · #8 (**permalink**) 26.09.2011, 21:07

И получишь криво работающий говнокод.
Нужно проверять что мышь над элементом, а не надеяться что mouseout сработает.

ugin_root · #9 (**permalink**) 26.09.2011, 21:40

Gozar,
можно правильный пример?
а onMouseOver может не сработать?

Gozar · #10 (**permalink**) 26.09.2011, 22:22

Сообщение от ugin_root

Gozar,
можно правильный пример?
а onMouseOver может не сработать?

Нет нельзя, потому что реализация довольно большая и в своё время отняла у меня приличное количество времени.

Можешь не верить на слово, тем более что скрипт нужен не тебе. Одно могу сказать точно, что mouseout вешать на контейнеры с вложениями нельзя(можно, но не стоит). У тс контейнер а.

Форум

Справочник

Discord чат

Курсы javascript