Вторник, 18.12.2018, 18:48 | RSS | Приветствую Вас Гость
Главная | Регистрация | Вход
Меню сайта
Категории раздела
Разное [10]
Решения задач (студентам) [9]
PC Игры - кодинг [2]
Python [1]
PHP, Mysql [1]
HTML, CSS, Javascript [1]
Scilab [1]
Поиск
Опрос
Какой браузер вы сейчас используете?
Всего ответов: 48
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » HTML, CSS, Javascript

Javascript. Всплывающая подсказка.
Обычно, если требуется дать пояснение к некоторым элементам на странице, используют всплывающие подсказки. Главные отличия и преимущества всплывающей подсказки от обычной поясняющей надписи в том, что она "не занимает" место на странице и появляется тогда, когда это требуется.

Самый удобный способ привязать всплывающую подсказку к какому-либо элементу - это задать ее через атрибут.
К примеру:

<img src="/someimg.png" helpbox="Это всплывающая подсказка к данной картинке.">

Здесь helpbox задает всплывающую подсказку к изображению.

Это можно реализовать функцией, которая будет отслеживать на странице все элементы с атрибутом helpbox и привязывать к ним обработку событий onmouseover и onmouseout. Так же на странице потребуется элемент <div> с id равным "boxelement".

function readHelperAttr()
{
    elements = document.getElementsByTagName('*'); // получить все елементы страницы
    elCount = elements.length; // количество элементов на странице
    for (i=0; i<elCount; i++)
    {
        Attr = elements[i].getAttribute('helpbox');
        if (Attr) // проверка наличия атрибута helpbox
        {
            elements[i].onmouseover = function() { // обработчик события при наведении мыши
                obj = document.getElementById('boxelement');
                obj.innerHTML = this.getAttribute('helpbox'); // поместить в boxelement текст из атрибута
                obj.style.display = 'block'; // сделать подсказку видимой
                document.getElementById('boxelement').style.top = getBodyScrollTop(); // отобразить сверху слева
                this.style.cursor = 'help'; // показать курсор с вопросиком
            };
            elements[i].onmouseout = function() { // обработчик события при сдвигании мыши с элемента
                obj = document.getElementById('boxelement');
                obj.innerHTML = ''; // очистить boxelement
                obj.style.display = 'none'; // скрыть
            };
        }
    }
}

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

function getBodyScrollTop()
{
    return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

Применение функции:
  1. В элемент <body> прописать атрибут onload="readHelperAttr();"
  2. Прописать атрибуты helpbox="" везде, где нужна подсказка
P.S. Если всплывающие подсказки содержат много текста, то в некоторых случаях они даже мешают. В этом случае практичнее выводить подсказку, как показано в данном примере - сверху. Ее будет хорошо видно и она не перекроет "полстраницы". Но если, же предполагается, что подсказки будут небольшие, то лучше при их выводе учитывать координаты курсора.

clientX, clientY - указывают координаты X и Y указателя мыши относительно клиентской области или окна браузера.

Поделиться ссылкой в соц. сетях:

Категория: HTML, CSS, Javascript | Добавил: =Sanek= (09.08.2011)
Просмотров: 1505 | Теги: всплывающая подсказка, атрибут, clientX, clientY, javascript | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

© 2018 raznocoding.do.am