JavaScript: Мгновенные всплывающие подсказки. Как? :: Web-программирование :: Компьютерный форум Ru.Board

Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: Мгновенные всплывающие подсказки. Как?

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему

Написать ответ в эту тему

xntx

хнотик-багоискатель

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Вот нужно, чтоб как только наводишь мышку на текст, сразу обьяснялось в подсказке.
А именно, нужно заменить:
<span title="Пятница, 13 Января 2013 г. - 20:35:56">Пятница, 13.01.13 - 20:35</span>
только вот ждать нужно мышаком, думаю юзеры не додумаются, как можно яваскриптом сделать свою подсказку?
Делать для каждой подсказки свой слой не совсем подходит - на странице может быть до 50 таких дат...

----------
Hello world!

Всего записей: 5169 | Зарегистр. 15-02-2003 | Отправлено: 16:45 16-08-2004

Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

xntx

Код:

var n = (document.layers) ? 1 : 0;
var inside = 0;
var our_obj = 0;
var was_cursor_init = 0;

function cursorInit(){

maper = new marker('popDiv');
if (n) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = move;
was_cursor_init = 1;

}

function b_moveIt(x,y){
this.x = x; this.y = y;
lay.left = this.x; lay.top = this.y;
}

function marker(obj){
lay = (n)?eval('document.'+obj):eval('document.all.'+obj+'.style');
this.x = (n)?lay.left:lay.pixelLeft; this.y = (n)?lay.top:lay.pixelTop;
this.moveIt = b_moveIt; return this;
}

function move(e){
our_obj = e;
if (inside == 1) {
x = n ? e.pageX : event.x+document.body.scrollLeft;
y = n ? e.pageY : event.y+document.body.scrollTop;
if (x-55 < 0)
maper.moveIt(0, y+14);
else
maper.moveIt(x-55, y+14);
}

}

function showinfo(help){
if (help != '')
{
inside = 1;
if ( was_cursor_init == 0 ) cursorInit(); if (our_obj != 0) move(our_obj);
if (n) {
document.layers["popDiv"].document.open();
document.layers["popDiv"].document.writeln('<table width=180 border=1 cellpadding=2 cellspacing=0 bordercolordark=#FEF5DC><tr><td class=apopDiv>' + help +'</td></tr></table>');
document.layers["popDiv"].document.close();
document.layers["popDiv"].visibility = "visible";
} else {
document.all("popDiv").innerHTML = '<table width=140 cellpadding=2 cellspacing=1 bgcolor=000000><tr bgcolor=FFFFE7><td class=apopDiv>' + help +'</td></tr></table>';
document.all.popDiv.style.visibility = "visible";
}
}
else
{Out();}
}

function showusernah(help){
if (help != '')
{
inside = 1;
if ( was_cursor_init == 0 ) cursorInit(); if (our_obj != 0) move(our_obj);
if (n) {
document.layers["popDiv"].document.open();
document.layers["popDiv"].document.writeln('<table width=180 border=1 cellpadding=2 cellspacing=0 bordercolordark=#FEF5DC><tr><td class=apopDiv>' + help +'</td></tr></table>');
document.layers["popDiv"].document.close();
document.layers["popDiv"].visibility = "visible";
} else {
document.all("popDiv").innerHTML = '<table width=140 cellpadding=2 cellspacing=1 bgcolor=000000><tr bgcolor=FFFFE7><td class=apopDiv>' + help +'</td></tr></table>';
document.all.popDiv.style.visibility = "visible";
}
}
else
{Out();}
}

function Out(){
if ( was_cursor_init == 0 ) cursorInit(); inside = 0;
lay.visibility = "hidden";
}

yXzyff=cursorInit;

<span onmouseout=Out(); onmouseover=showinfo('Пятница, 13 Января 2013 г. - 20:35:56');>Пятница, 13.01.13 - 20:35</span>

Добавлено
Ну и эта куда нить

)
<DIV ID="popDiv" STYLE="position:absolute; visibility:hide;"></DIV>

Всего записей: 365 | Зарегистр. 28-12-2003 | Отправлено: 17:22 16-08-2004

kopchik Junior Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору <........ onMouseOver="window.status='Пятница, 13.01.13 - 20:35';return true">"Пятница, 13 Января 2013 г. - 20:35:56" </....> Что типа такого работать не будет? Для Тага <a href=''...'' работает...
	Всего записей: 131 \| Зарегистр. 23-01-2004 \| Отправлено: 17:34 16-08-2004

apatit

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

kopchik

Цитата:

Что типа такого работать не будет?

Человек всплывающую подсказку просит.

----------
http://www.murman.ws/ - Нет очередям в налоговой и на почте! Сэкономим бумагу.

Всего записей: 1169 | Зарегистр. 09-10-2001 | Отправлено: 18:38 16-08-2004

xntx

хнотик-багоискатель

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

SafeWay
да, чтото типа такого нужно, только это блокирует sp2, ща будем глядеть, это он блокирует сами лайеры, или чето именно в коде...

Добавлено
kopchik
в статусбар из принцыпа ничего не буду пихать - у меня не порно страница

----------
Hello world!

Всего записей: 5169 | Зарегистр. 15-02-2003 | Отправлено: 19:13 16-08-2004

xntx

хнотик-багоискатель

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

у меня сделано так:

Код:

// Floating layer
var xpos;
var ypos;

function imouse()
{
ypos=event.y+document.body.scrollTop;
xpos=event.x+document.body.scrollLeft;
moveLayer(floatMenu);
}

document.onmousemove=imouse;

function showLayer(obj, content)
{
if (obj)
{
s = '<table class="forumline" cellspacing="1" cellpadding="3"><tr><td class="row2"><nobr><span class="gensmall">';
s += content;
s += '</span></nobr></td></tr></table>';
obj.innerHTML = s;
obj.style.top = ypos+20;
if (obj.offsetWidth + xpos + 10 + 3 + 20 > document.body.offsetWidth)
{
obj.style.left = document.body.offsetWidth - obj.offsetWidth - 3 - 20;
}
else
{
obj.style.left = xpos+10;
}
}
obj.style.display = '';
}

function moveLayer(obj)
{
if (obj)
{
if (obj.style.display == '')
{
if (obj.offsetWidth + xpos + 10 + 3 + 20 > document.body.offsetWidth)
{
obj.style.left = document.body.offsetWidth - obj.offsetWidth - 3 - 20;
}
else
{
obj.style.left = xpos+10;
}

obj.style.top = ypos+20;
}
}
}

function hideLayer(obj)
{
if (obj)
{
obj.style.display = 'none';
}
}

Код:

<div id="floatMenu" style="position:absolute; top:0; left:0; width:0; height:0; display:none;"> </div>

Код:

<span onmouseover="showLayer(floatMenu,'SomeText');" onmouseout="hideLayer(floatMenu);">Text</span>

Но вот проблема, заходим на http://www.lambroso.com/forum.aspx и смотрим на даты справа. когда на них наводишь, то на первом пикселе посказка появляется прямо под мышаком, и только при продвижении еще на одну пикселю она выезжает изза экрана (как и задумано, чтобы небыло горизонтальной прокрутки).
кто знает почему это так??

----------
Hello world!

Всего записей: 5169 | Зарегистр. 15-02-2003 | Отправлено: 18:33 28-09-2004

oid

Junior Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:

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

Да все прекрасно работает, просто на глюкавом компе, где камень пещерный - будет подтормаживать. Попробуй уменьшить скорость "выезда" или сотвори под датой скрытый пустой именованный слой, а в него сделай innerHTML и покажи. Хотя то что есть - очень неплохо.

Всего записей: 106 | Зарегистр. 17-09-2004 | Отправлено: 10:33 29-09-2004

Открыть новую тему

Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » JavaScript: Мгновенные всплывающие подсказки. Как?

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

LiteCoin: LgY72v35StJhV2xbt8CpxbQ9gFY6jwZ67r