Обычно, если требуется дать пояснение к некоторым элементам на странице, используют всплывающие подсказки. Главные отличия и преимущества всплывающей подсказки от обычной поясняющей надписи в том, что она "не занимает" место на странице и появляется тогда, когда это требуется.
Самый удобный способ привязать всплывающую подсказку к какому-либо элементу - это задать ее через атрибут. К примеру:
<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); } Применение функции:
В элемент <body> прописать атрибут onload="readHelperAttr();"
Прописать атрибуты helpbox="" везде, где нужна подсказка
P.S. Если всплывающие подсказки содержат много текста, то в некоторых случаях они даже мешают. В этом случае практичнее выводить подсказку, как показано в данном примере - сверху. Ее будет хорошо видно и она не перекроет "полстраницы". Но если, же предполагается, что подсказки будут небольшие, то лучше при их выводе учитывать координаты курсора.
clientX, clientY - указывают координаты X и Y указателя мыши относительно клиентской области или окна браузера.