Воскресенье, 13.07.2025, 01:51
Приветствую Вас Гость | Регистрация | Вход

Позитивное Пространство

Меню сайта
Login form
Обмен денег

С этого сайта скидка на обмен 15%!

Активируйте код дисконтной карточки
NA111

Обмен электронных денег. Обменять WMZ, WMR, WME, WMU, WMB.
Оплачиваемая рекла
Наш опрос
Какая пора года вам нравится больше?
Всего ответов: 579
Календарь
«  Июль 2025  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Архив записей

Всплывающая подсказка

logo


home map contact


Если вы видите это сообщение - значит вы используете браузер Internet Explorer. Негативное отношение к этому браузеру сложилось не только у владельца данного ресурса, но и у подавляющего большинства людей, разбирающихся в web технологиях. Попробуйте установить один из браузеров по ссылке ниже, возможно вам он тоже понравится больше!

Opera, the fastest and most secure web browser     Spread Firefox Affiliate Button

javascript tooltip (всплывающая подсказка)

Всплывающая подсказка - довольно важный элемент оформления современного web сайта. А если ее еще красиво оформить и не злоупотреблять применением...

Перейду сразу к делу:
var d = document;
var offsetfromcursorY=15 // y offset of tooltip
var ie=d.all && !window.opera;
var ns6=d.getElementById && !d.all;
var tipobj,op;
 
function tooltip(el,txt) {
 tipobj=d.getElementById('mess');
 tipobj.innerHTML = txt;
 op = 0.1; 
 tipobj.style.opacity = op; 
 tipobj.style.visibility="visible";
 el.onmousemove=positiontip;
 appear();
}

function hide_info(el) {
 d.getElementById('mess').style.visibility='hidden';
 el.onmousemove='';
}

function ietruebody(){
return (d.compatMode && d.compatMode!="BackCompat")? d.documentElement : d.body
}

function positiontip(e) {
 var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
 var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
 var winwidth=ie? ietruebody().clientWidth : window.innerWidth-20
 var winheight=ie? ietruebody().clientHeight : window.innerHeight-20
 
 var rightedge=ie? winwidth-event.clientX : winwidth-e.clientX;
 var bottomedge=ie? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;

 if (rightedge < tipobj.offsetWidth) tipobj.style.left=curX-tipobj.offsetWidth+"px";
 else tipobj.style.left=curX+"px";

 if (bottomedge < tipobj.offsetHeight) tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
 else tipobj.style.top=curY+offsetfromcursorY+"px";
}

function appear() { 
 if(op < 1) {
 op += 0.1;
 tipobj.style.opacity = op;
 tipobj.style.filter = 'alpha(opacity='+op*100+')';
 t = setTimeout('appear()', 30);
 }
}

В теле страницы должен присутствовать div с visibility="hidden" и position="absolute". Конечно, его можно создавать динамически, но это я оставляю на ваше усмотрение, как, собственно, и его оформление. Использовать tooltip нужно так:
<h2 onmouseover="tooltip(this,'Это просто пример всплывающей<br /> подсказки JavaScript!')" onmouseout="hide_info(this)">
It is just JavaScript Tooltip example!</h2>
Разберем немного javascript код:
  • функция tooltip собственно, вызывает появление подсказки, в качестве параметров принимает элемент, вызвавший tooltip и текст подсказки
  • функция hide_info скрывает tooltip
  • функция ietruebody нужна для того, чтобы учесть кривизну IE разных версий
  • функция positiontip позиционирует tooltip во время движения мыши над целевым объектом
  • функция appear обеспечивает плавное появление подсказки

пример

наведите мышь на текст ниже

It is just JavaScript Tooltip example!