Интересная задачка :)

Legi · March 18, 2009

Товарищи... вот уже бьюсь целый день, но никак не могу победить...

Цель:

При наведении на текст и удержании мышки в течении 10 секунд (хотя не обязательно) появлялось рядом с курсором небольшое окошко (хотя бы банальное модальное окно) с линком на картинку...

Вот В общем-то никак побороть не могу.. он у меня тупо открывает (в мазиле) вкладку

<a onmouseover="window.open('http://ya.ru' width='200' height='200')" onblur="self.focus()" href="http://ya.ru/" target="_parent">Yandex</a>

где я не прав?

или может подскажите другой способ из ряда "всплывающая подсказка".

Спасибо

Nekromancer · March 18, 2009

гдето я видел скриптик на хинты, думаю туда можно и ссылку вставить...

не помню где так что попробуйте гугл..

Edited March 18, 2009 by Nekromancer

haZe · March 18, 2009

вот тут есть глянь, тока тебе переделать придется, вызывать не целевую функцию, а другую, которая ее вызывает через N-секунд

rus · March 18, 2009

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

Legi · March 18, 2009

не ожидал такой оперативности!!!!

огромнейшее спасибо.. сейчас буду колдовать!!!

о результате сообщу.. код выложу

Legi · March 19, 2009

результат меня добил даже без задержки всё хорошо выглядит...

воспользовался вот этим

единственно я там подправил последнюю строчку чтобы картинка на текст\сылку:

<a href="/images/foto/1.jpg" onMouseOver="helpBox('Картинка 1', '<img src=/images/foto/1.jpg>')" onMouseOut="helpBox()">Картинка 1</a>

В общем спасибо всем

А данную вещь хорошо можно применять в каких-либо списках людей и при наведении мышки на ФИО показывалась сразу небольшая фотография

haZe · March 20, 2009

Да где угодно ее можно применять)

zwie · March 22, 2009

добавил прозрачности отсюда к скрипту haZe. Вроде работает

<html>
 <head>
		  <title>Help box with opacity</title>
</head>
<style type="text/css">
.helpBox{background:#fff;border:1px solid #666;width:300px;}
.helpTitle{background: #ff9900;width:100%;color:#000;}
.helpText{padding:5px;}
.myText{border:1px solid #000000; float:left;}
<script language="JavaScript">
</style>
<script language="JavaScript" type="text/javascript">
function defPosition(event) {
	var x = y = 0;
	if (document.attachEvent != null) { // Internet Explorer & Opera
		x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
		y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
	} else if (!document.attachEvent && document.addEventListener) { // Gecko
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	} else {
		// Do nothing
	}
	return {x:x, y:y};
}
document.onmousemove = function(event) {
	var event = event || window.event;
		document.getElementById('help').style.left = defPosition(event).x + 15 + "px";
		document.getElementById('help').style.top = defPosition(event).y + "px";
}
function helpBox(title, text) {
		document.getElementById('helpTitle').innerHTML = title;
		document.getElementById('helpText').innerHTML = text;
		if(document.getElementById('help').style.display == 'none'){
				setOpacity(0);
				document.getElementById('help').style.display = 'block';
				for(i=0;i<11;i++){
				setTimeout('setOpacity('+i+')',100*i);
				}
		}else{
				document.getElementById('help').style.display = 'none';
		}
}
function setOpacity(value)
{
	//alert(value);
	document.getElementById('help').style.opacity = value/10;
	document.getElementById('help').style.filter = 'alpha(opacity=' + value*10 + ')';
}
</script>
<body>
<div id="help" class="helpBox" style="display:none;position:absolute;"><p id="helpTitle" class="helpTitle">Title</p><p id="helpText" class="helpText">Help text</p></div>
<div class="myText" onMouseOver="helpBox('Пересчет значений', 'Если Вы сомневаетесь в достоверности отображаемых значений, то Вы можете пересчитать все значения')" onMouseOut="helpBox()">Текст, например</div>
</body>
</html>

haZe · March 22, 2009

в действии то покажи, что получилось

zwie · March 22, 2009

haZe,Тыц

все тоже самое, просто появляется плавно.

haZe · March 22, 2009

сделай чтоб побыстрее появлялось, с большим числом итераций, приятней выглядеть будет

Edited March 22, 2009 by haZe

zwie · March 22, 2009

Подправил.

Если кому-то надо будет: волшебная строчка - setTimeout('setOpacity('+i+')',100*i). Ей в качестве аргумента передаются функция и интервал в мс, через который эта функция и будет выполняться(в данном примере - 100*i, i - это шаг цикла).

haZe · March 23, 2009

Во! Терь кайф! Попробуй офф тоже плавный сделать

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