Создаем легкие и красивые хинты на JavaScript

Хинт - это всплывающая подсказка, появляющаяся при наведении курсора мыши на ссылки. Стандартные хинты в броузерах крайне несимпатичны, а ведь это важный интерфейсный элемент, который при грамотном подходе может быть очень полезен. Есть большие толстые библиотеки, в которых заложена весьма приличная функциональность для оформления хинтов. Но иногда не хочется подключать большую библиотеку. Здесь мы рассмотрим, как можно самостоятельно сделать простой, легкий и очень симпатичный хинт на JavaScript и CSS.

Пример работы скрипта

Поехали!

Сперва создадим три файла - заготовки, необходимые нам для создания тестового примера. Это будут файлы таблицы стилей style.css, JavaScript-сценарий script.js и собственно сам индексный файл index.html. Чтобы было проще, можно скачать заготовки здесь.

Важно помнить, что JavaScript-сценарии должны быть как можно более простыми и логичными. Первое, что необходимо сделать, это четко определить для себя, что должен делать скрипт. Это позволит вам, учитывая имеющиеся функциональные возможности, создать схему построения любого сложного скрипта еще до того, как вы приступите непосредственно к написанию кода. Это поможет вам упростить логику и создать чистый качественный код. Планирование прежде всего!

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

Как будет проходить работа

  1. Устанавливаем глобальные переменные.
  2. Создаем функцию для отображения хинта, которая получает две переменные: текст для вывода в хинте и опционально ширину хинта.
  3. Когда вызывается эта функция, создается хинт и регистрируется событие onmousemove для позиционирования хинта. Вставляем содержимое в хинт и вызываем функцию, создающую наращивание непрозрачности до целевого значения.
  4. По событию onmouseout вызывается функция, которая в цикле уменьшает непрозрачность до полного исчезновения хинта.

Начнем с того, что создадим локальное пространство переменных для использования функциональных возможностей нашего скрипта. Это необходимо для того, чтобы не конфликтовать с другими возможными скриптами.

var tooltip(){
  return{};
}();

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

  • id (string) - идентификатор хинта
  • top (integer) – отступ хинта сверху от курсора мыши, в пикселах
  • left (integer) – отступ хинта справа от курсора мыши, в пикселах
  • maxw (integer) – максимальная ширина хинта, в пикселах
  • speed (integer) – значение, на которое в каждом шаге увеличивается непрозрачность хинта при его появлении на экране
  • timer (integer) – скорость исчезновения хинта
  • endalpha (integer) – конечная непрозрачность хинта
  • alpha (integer) – кущая непрозрачность хинта
  • tt, t, c, b, h – глобальные переменные, которые будут установлены позже
  • ie (boolean) – переменная, зависящая от броузера
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;

Мы хотим создать хинт с закругленными левым верхним и правым нижним углами. Для этого следует программно добавить в DOM несколько элементов <div> и описать их стиль в CSS. Скрипт должен генерировать примерно такой код:

<div id="tt">
<div id="tttop"> </div>
<div id="ttcont"> </div>
<div id="ttbot"> </div>
</div>

Первую функцию назовем show, она будет доступна вызовом tooltip.show(). Функция будет принимать два параметра: строковый контент хинта и опциональное целочисленное значение ширины хинта. Сперва эта функция должна проверить, существует ли вообще хинт, был ли добавлен <div id="tt"> в структуру документа DOM, а уже потом свойству innerHTML того элемента <div>, который содержит контент, - в нашем случае это <div id="ttcont">, - надо назначить контент, а также для главного <div id="tt"> надо установить ширину и высоту в пикселах, в также функцию для создания эффекта исчезновения хинта.

show:function(v,w){
  if(tt == null){
    tt  = document.createElement('div');
    tt.setAttribute('id',id);
    t  = document.createElement('div');
    t.setAttribute('id',id  + 'top');
    c  = document.createElement('div');
    c.setAttribute('id',id  + 'cont');
    b  = document.createElement('div');
    b.setAttribute('id',id  + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity  = 0;
    tt.style.filter  = 'alpha(opacity=0)';
    document.onmousemove  = this.pos;
  }
  tt.style.display  = 'block';
  c.innerHTML =  v;
  tt.style.width  = w ? w + 'px' : 'auto';
  if(!w  && ie){
    t.style.display  = 'none';
    b.style.display  = 'none';
    tt.style.width  = tt.offsetWidth;
    t.style.display  = 'block';
    b.style.display  = 'block';
  }
  if(tt.offsetWidth  > maxw){tt.style.width = maxw + 'px'}
  h =  parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer =  setInterval(function(){tooltip.fade(1)},timer);
},

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

pos:function(e){
  var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
  var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
  tt.style.top = (u - height) + 'px';
  tt.style.left = (l + left) + 'px';
},

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

fade:function(d){
  var a = alpha;
  if ((a !=  endalpha && d == 1) || (a != 0 && d == -1)){
    var  i = speed;
    if(endalpha  - a < speed && d == 1){
      i  = endalpha - a;
    } else  if(alpha < speed && d == -1){
      i  = a;
    }
    alpha  = a + (i * d);
    tt.style.opacity  = alpha * .01;
    tt.style.filter  = 'alpha(opacity=' + alpha + ')';
  }
else{ clearInterval(tt.timer); if(d == -1){ tt.style.display = 'none'; } } },

И в самом конце функция, которая прячет хинт по событию onmouseout.

hide:function(){
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}

Это все! В результате у нас получился скрипт, который весит около 2 Кбайт и корректно работает в IE6, IE7, Firefox, Opera и Safari.

Полный скрипт

var tooltip=function(){
  var id = 'tt';
  var top = 3;
  var left = 3;
  var maxw = 300;
  var speed = 10;
  var timer = 20;
  var endalpha = 95;
  var alpha = 0;
  var tt,t,c,b,h;
  var ie = document.all ? true : false;
  return{
    show:function(v,w){
      if(tt == null){
        tt = document.createElement('div');
        tt.setAttribute('id',id);
        t = document.createElement('div');
        t.setAttribute('id',id + 'top');
        c = document.createElement('div');
        c.setAttribute('id',id + 'cont');
        b = document.createElement('div');
        b.setAttribute('id',id + 'bot');
        tt.appendChild(t);
        tt.appendChild(c);
        tt.appendChild(b);
        document.body.appendChild(tt);
        tt.style.opacity = 0;
        tt.style.filter = 'alpha(opacity=0)';
        document.onmousemove = this.pos;
      }
      tt.style.display = 'block';
      c.innerHTML = v;
      tt.style.width = w ? w + 'px' : 'auto';
      if(!w && ie){
        t.style.display = 'none';
        b.style.display = 'none';
        tt.style.width = tt.offsetWidth;
        t.style.display = 'block';
        b.style.display = 'block';
      }
      if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
      h = parseInt(tt.offsetHeight) + top;
      clearInterval(tt.timer);
      tt.timer = setInterval(function(){tooltip.fade(1)},timer);
    },
    pos:function(e){
      var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
      var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
      tt.style.top = (u - h) + 'px';
      tt.style.left = (l + left) + 'px';
    },
    fade:function(d){
      var a = alpha;
      if((a != endalpha && d == 1) || (a != 0 && d == -1)){
        var i = speed;
        if(endalpha - a < speed && d == 1){
          i = endalpha - a;
        }else if(alpha < speed && d == -1){
          i = a;
        }
        alpha = a + (i * d);
        tt.style.opacity = alpha * .01;
        tt.style.filter = 'alpha(opacity=' + alpha + ')';
      }else{
        clearInterval(tt.timer);
        if(d == -1){tt.style.display = 'none'}
      }
    },
    hide:function(){
      clearInterval(tt.timer);
      tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
    }
  };
}();

Теперь в CSS произведем необходимые украшательства.

#tt {
  position:absolute;
  display:block;
  background:url(images/tt_left.gif) top left no-repeat;
}
#tttop {
  display:block;
  height:5px;
  margin-left:5px;
  background:url(images/tt_top.gif) top right no-repeat;
  overflow:hidden;
}
#ttcont {
  display:block;
  padding:2px 12px 3px 7px;
  margin-left:5px;
  background:#666;
  color:#fff;
}
#ttbot {
  display:block;
  height:5px;
  margin-left:5px;
  background:url(images/tt_bottom.gif) top right no-repeat;
  overflow:hidden;
}

Для того, чтобы высветить и погасить хинт, используйте функции, как это показано ниже. Второй параметр функции show опциональный, если он отсутствует, то ширина хинта будет подстраиваться под ширину контента, вплоть до максимального значения, указанного в переменной maxh.

onmouseover="tooltip.show('Testing 123',200);"
onmouseout="tooltip.hide();"

Закончили!

  • Смотреть демо
  • start.zip - заготовки, необходимые для создания тестового примера
  • tooltip.zip - полностью готовый скрипт и все необходимые файлы

 

Другие статьи из этой рубрики

Классный эффект "перекатывания" меню

Существует иллюзия, что красивые динамические спецэффекты для оформления сайтов можно создавать только на Flash. В этой статье мы рассмотрим, как на базе JavaScript и CSS можно получить отличный спецэффект для меню навигации. Клиенты будут довольны!
portfolius.ru © 2008
Написать письмо