Всплывающее сообщение

people2010 · August 10, 2010

Как сделать всплывающее сообщение при наведении мышкой, чтоб оно появлялось, а потом простояв 4 сек. опускалось вниз обратно? Вот попробовал так ,что-то не выходит. Как надо?

<html><head>
<title>Тренировочный документ</title>
<script type='text/javascript'>
function im(){
document.write('<img style='margin-left:500px; margin-top:400px;' src="1.gif" alt='Подсказка'>');
}


function bounty(){
setTimeout("im(),4000");
}

</script>
</head>
<body>

<input type='button' value='knopka' onClick='bounty()'>

</body>
</html>

Edited August 10, 2010 by people2010

s0rr0w · August 10, 2010

Ошибка в синтаксисе setTimeout

Вот тут синтаксис этой функции в FF

https://developer.mozilla.org/en/window.setTimeout

А вот тут в IE

http://msdn.microsoft.com/en-us/library/ms...28VS.85%29.aspx

Синтаксис отличается.

stars · August 10, 2010

И что именно вы тут попробовали? У вас есть кнопка по нажатию на которую вызывается функция bounty где у вас стоит задержка на вызов функции im которая добавляет некую картинку...

Во первых где вы попытались сделать "всплывающее сообщение"(под всплывающим наверное все таки имеется ввиду плавное появление?) "при наведении мышкой" " простояв 4 сек. опускалось вниз обратно", во вторых для чего тут поставлены кавычки:

setTimeout("im(),4000");

В следающей строке вообще путаница с кавычками и апострофами...

document.write('<img style='margin-left:500px; margin-top:400px;' src="1.gif" alt='Подсказка'>');

Так же интересно вы хоть задумывались куда именно будет вставлена эта строка если бы вы ее правильно написали? ))

people2010 · August 10, 2010

Как сделать чтоб при наведении мышкой на ссылку, всплывало мое изображение с задержкой 4 секунды.

один посоветовал так.Написал так, при наведении мышкой на ссылку в браузере ИЕ, выдаёт сообщение.

Требуется объект Строка 11 Символ 5

<html><head>
<title>Тренировочный документ</title>
<script type='text/javascript'>

var bounty_obj = document.getElementById('hint');
function bounty_show() {
	if (bounty_hide.T) {
		clearTimeout(bounty_hide.T);
		bounty_hide.T = 0;
	};
	bounty_obj.style.display = 'block';
};
function bounty_hide() {
	if (bounty_hide.T) {
		clearTimeout(bounty_hide.T);
		bounty_hide.T = 0;
	};
	bounty_hide.T = setTimeout(function(){
		bounty_obj.style.display = 'none';
		bounty_hide.T = 0;
	}, 4000);
};

</script>
</head>
<body>

<a href='page.html' onMouseOver='bounty_show()' onMouseOut='bounty_hide()'>Переход в будующее</a>
<div id="hint" style="display:none"><img src='1.gif' alt='Информация'></div>

</body>
</html>

Edited August 10, 2010 by people2010

stars · August 10, 2010

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

var bounty_obj = document.getElementById('hint');

Смотрите вот в этой строке вы пытаетесь получить элемент которого еще нету... Ситуация один в один как тут http://forum.htmlbook.ru/index.php?showtop...t=0&start=0

Как вам уже говорили попробуйте воспользоваться обработчиком события onLoad

Edited August 10, 2010 by stars

people2010 · August 10, 2010

Пробую так дописывать в с крипт, не работает.

window.onload = bounty_obj;

stars · August 10, 2010

Пробую так дописывать в с крипт, не работает.
window.onload = bounty_obj;

Вы вот так просто и дописали? )) А чего вы сами то ожидали получить? Суть то в том что вы объявляете глобальную переменную в которую вам надо получить обьект, я честно в JS не очень силен, я бы написал так:

var bounty_obj;
window.onload = function () {
bounty_obj = document.getElementById('hint');
};

Edited August 10, 2010 by stars

people2010 · August 10, 2010

Написал код так:

<html><head>
<title>Тренировочный документ</title>
<script type='text/javascript'>

var bounty_obj;
window.onload =
bounty_obj = document.getElementById('hint');

function bounty_show() {
	if (bounty_hide.T) {
		clearTimeout(bounty_hide.T);
		bounty_hide.T = 0;
	};
	bounty_obj.style.display = 'block';
};

function bounty_hide() {
	if (bounty_hide.T) {
		clearTimeout(bounty_hide.T);
		bounty_hide.T = 0;
	};
	bounty_hide.T = setTimeout(function(){
		bounty_obj.style.display = 'none';
		bounty_hide.T = 0;
	}, 4000);
};

</script>
</head>
<body>

<a href='page.html' onMouseOver='bounty_show()' onMouseOut='bounty_hide()'>Переход в будующее</a>
<div id="hint" style="display:none"><img src='1.gif' alt=''></div>

</body>
</html>

Странно, выдало следующие ошибки:

Строка 14 символ 5 требуется объект

Строка 23 символ 9 требуется объект

stars · August 10, 2010

Эм ну вы бы хоть скопировали нормально... Не думаю что так можно писать:

window.onload =
bounty_obj = document.getElementById('hint');

Напишите

window.onload = function () {
bounty_obj = document.getElementById('hint');
};

people2010 · August 10, 2010

Ещё момент, скажите как сделать, чтоб картинка выехала, постояла 2 секунда и опять заехала. Думаю что цикл нужен и смена координат за кадой итераций, но как именно это в коде написать не знаю. Подскажите как это сделать. Заранее

благодарю.

Edited August 11, 2010 by people2010

people2010 · August 11, 2010

По поводу предыдущего кода:

В функции bounty_show()

Там делается сравнение

if (bounty_hide.T) {
clearTimeout(bounty_hide.T);
bounty_hide.T = 0;

Что будет означать вот это с точкой bounty_hide.T в сравнении?

Это значит доступ через мою созданную функцию с именем bounty_hide к какой-то другой переменной находящейся в другой функции что ли?

Меня смущает .Т, почему она может ещё и добавлятся к названию любой функции где угодно?

people2010 · August 12, 2010

Вот так вроде меньше код.

<html><head>
<title>Тренировочный документ</title>
<script type='text/javascript'>
var bounty_obj;
window.onload = function(){
bounty_obj = document.getElementById('hint');
}

function bounty_show() {
	bounty_obj.style.display = 'block';
};
function bounty_hide() {
	setTimeout(function(){
		bounty_obj.style.display = 'none';
	}, 4000);
};
</script>
</head>
<body 
<a href='page.html' onMouseOver='bounty_show()' onMouseOut='bounty_hide()'>Переход в будующее</a>
<div id="hint" style="display:none"><img src='1.gif' alt='Информация'></div>
</body>
</html>

people2010 · August 16, 2010

Вот упрощённый код:

<html>
<head><title>Document</title>
<script type='text/javascript'>
var a,timeoutik;

function f1(){
if(timeoutik){
clearTimeout(timeoutik);
timeoutik = 0;
};
if(!a) a = document.getElementById('tik_tak');
a.style.display = 'block';
};

/*_____________________________________________________________*/

function f2(){
if(timeoutik){
clearTimeout(timeoutik);
timeoutik = 0;
};

timeoutik = setTimeout(function(){
if(!a) a = document.getElementById('tik_tak');
a.style.display = 'none';
},2000);

};
</script>

</head>
<body>
<a href='page.html' onMouseOver='f1()' onMouseOut='f2()'>Жми на меня</a>
<div id="tik_tak" style="display:none; 
position:absolute; left:10px; top:35px;">
<img src='1.gif' alt='фотка'></div>

</body>
</html>

1)А почему обработчик событий onMouseOut='bounty_hide()'>

засовывается в онлоад,то есть когда пользователь увёл мышку от текста?

2)Как может в этой функции

 function bounty_show() {
	if (bounty_hide_timeout) {
		clearTimeout(bounty_hide_timeout);
		bounty_hide_timeout = 0;
	};
	if (!bounty_obj) bounty_obj = document.getElementById('hint');
	bounty_obj.style.display = 'block';
};

происходит проверка if (bounty_hide_timeout) { на то, содержит ли переменная bounty_hide_timeout что нибудь, если bounty_hide_timeout получает своё значение в теле совсем другой функции,которая находится ниже?

3)clearTimeout(timeoutik); Без этой строки также работает, значит можно её убрать просто написав

timeoutik = 0; ?

Edited August 16, 2010 by people2010

Sign In

Всплывающее сообщение

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information