Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2010, 14:02
Аватар для Avaria
Интересующийся
Отправить личное сообщение для Avaria Посмотреть профиль Найти все сообщения от Avaria
 
Регистрация: 09.06.2009
Сообщений: 12

всплывающая подсказка
нужно всплывающее окошко, как подсказка
при клике на икону(картинку) всплывает блок с поясняющим текстом, и через пару секунд пропадает
как это реализовать?

<script type="text/javascript" language="javascript">
function displayDivName( item ) {

var obj = document.getElementById(item);
var intTime;
if (obj.style.display != 'none') {
obj.style.display = 'none';
}
else{obj.style.display = 'block';}

}
</script>

<div style="position: relative;">
<div id="Text" style="display:none; position: absolute; z-index: 200;
border:#CCCCCC solid 1px; background: #ddeeff; height:50px; width:280px; font-family:Tahoma; font-size:12px;
padding: 5px 5px 5px 5px; margin-top: 20px; visibility: visible;">
Пояснительный текст
</div>
</div>
<img src="image.gif" border="0" width="15" style="border: 0pt none;" onclick="displayDivName('smsTexton'); return false;" />


..вот что сделано сейчас.

сейчас не могу понять куда и как засунуть таймер, чтобы закрывалось, через пару тройку секунд.
полагается, что с помощью setTimeout...

Помогите, плиз, давно на скриптами не пользовалась (работа не располагала), а сейчас время поджимает, надо по шустрому сделать
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2010, 14:48
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Стили:
#smsTexton{
	position: absolute;
	border: solid #AAAAAA 1px;
	color:#00CCFF;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	line-height: 16px;
	padding: 2px 5px;
	margin: 25px 0px 0px 5px;

}

Скрипт:
var l = 0;
var t = 0;
var timer;
var IE = document.all?true:false;
document.onmousemove = getMouseXY;
var div = document.createElement("div");
function getMouseXY(e) {
	if (IE) {
		l = event.clientX ;
		t = event.clientY ;
	}
	else {
		l = e.pageX
		t = e.pageY
	}  
	
}

function TextAdd(text){
	document.body.appendChild(div );
	div.id = "smsTexton";
	div.innerHTML = text;
	timer = setTimeout(RemoveChild,3000);
  
}

function RemoveChild() {document.body.removeChild(document.getElementById("smsTexton"))}

ШТМЛ:
<div onclick="TextAdd('Текст подсказки,<br /> жди 3 сек и он исчезнет</b>')">
	Это подсказка!
<div>

Последний раз редактировалось JsLoveR, 11.02.2010 в 14:52.
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2010, 06:32
Аватар для Avaria
Интересующийся
Отправить личное сообщение для Avaria Посмотреть профиль Найти все сообщения от Avaria
 
Регистрация: 09.06.2009
Сообщений: 12

Все оказалось, гораздо проще

function displayDivName( item ) {

	var obj = document.getElementById(item);
	var intTime;
	if (obj.style.display != 'none') {
		obj.style.display = 'none';
	} 
		else{obj.style.display = 'block';
		setTimeout(function() { obj.style.display = 'none'; }, 3000);}
	
}


надо было еще чуток поковыряться ))))

ну и тем не менее спасибо за помощь, этот скриптик, тоже возьму себе на заметку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающая подсказка над полем kampil (X)HTML/CSS 9 25.10.2009 23:16
всплывающая java script подсказка ehevnlem Элементы интерфейса 2 16.12.2008 16:57
Всплывающая подсказка Kaito Общие вопросы Javascript 1 16.09.2008 17:28
Всплывающая подсказка SunYang Элементы интерфейса 14 12.06.2008 13:19
Всплывающая таблица SunYang Общие вопросы Javascript 1 15.03.2008 01:02