Принцип работы всплывающей подсказки

Статью будет интересно прочитать как новичкам в работе с JavaScript, так и более или менее продвинутым в этом вопросе людям. Ее цель - ознакомление читателя с принципом работы JavaScript-подсказки. В конце статьи есть краткое описание всех объектов, событий и свойств, используемых в скрипте.

В начале ознакомления с HTML создается впечатление, что в нем всего достаточно, а где-то есть даже что-то лишнее. Но по мере накопления знаний и опыта начинают возникать вопросы, ответов на которые в учебниках нет. Один из таких вопросов звучит примерно так: "а как бы украсить всплывающую подсказку?".

Иногда возникают такие ситуации, что без всплывающей подсказки никак не обойтись, а стандартные alt и title не вписываются в дизайн сайта. Как раз в таких ситуациях спасают подсказки, написанные на JavaScript.

Итак, как реализуется такая подсказка?

Для начала необходимо понять, что такое JavaScript-подсказка. А это всего навсего блок html-кода, который двигается за курсором мыши средствами JavaScript. Один из вариантов организации такого блока - использование тега <div>. Например:

<div id="myalt" style="visibility:hidden;
        position:absolute; left:0; top:0; border-style:solid;
        border-color:#000000; border-width:1px; width:400px; height:10px;
        background-color:#f5f5f5; padding:3px; z-index:3">
</div>

Параметр visibility установлен в hidden, т.к. изначально подсказка должна быть скрыта. Ширина этого блока 400 пикселей, а высота меняется в зависимости от содержимого и не меньше 10 пикселей. Также для визуального отделения подсказки от основного содержимого она обрамлена черной рамкой толщиной 1 пиксель.

Теперь нужно заставить подсказку появляться при наведении мыши на что-либо. Для примера она будет появляться и исчезать над картинкой:

<img src="../ann.jpg"
    onmouseover="movePic('Это ёж. Что он делает в лесу?')"
    onmouseout="hidePic()">

То есть при наведении мыши на картинку будет вызвана функция movePic() со строковым параметром - текстом подсказки, - которая отобразит div-блок рядом с указателем мыши, а при удалении - hidePic(), которая спрячет его обратно.

Далее следует скрипт появления и скрытия подсказки. Спрятать намного проще, чем отобразить, поэтому сначала hidePic():

function hidePic(){
//если чуть-чуть порыться в памяти или поднять глаза вверх, то можно понять, что myalt - имя блока.
myalt.style.visibility="hidden";//передача параметру visibility значения hidden, блок становится невидим
myalt.innerHTML="";//очищение содежимого блока
myalt.style.top=0;
myalt.style.left=0;//отправка блока в верхний левый угол экрана
}

//Теперь пришло время movePic():
function movePic(word){
myalt.innerHTML=word;//отправка в подсказку строки
myalt.style.left=window.event.clientX+5;
myalt.style.top=window.event.clientY+5;//блок находится на 5 пикселей правее и ниже курсора мыши
myalt.style.visibility="visible";//блок становится видимым
}

Этот вариант уже работает, но у него есть недостки:

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

Теперь пора исправлять недоделки. На самом деле все вышеперечисленные недостатки решаются очень легко:

• достаточно определить высоту прокрученной части документа;
• проводится проверка на положение курсора относительно правого края;
• аналогично с нижним краем.

function movePic(word){
myalt.innerHTML=word;
_x=window.event.clientX;
_y=window.event.clientY;//сохранение координат курсора мыши в переменные
_dx=5;//смещение подскаки вправо и влево относительно координат мыши
//Определение, помещается ли подсказка между курсором и краями экрана
left=false;right=false;
if(_dx+_x+myalt.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}
if(_dx+_y+myalt.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
//если объект в нижнем правом углу, подсказка всплывает над курсором
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
//помещение подсказки в найденные коородинаты
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;//смещение подскази в зависимости от высоты прокрученной части документа
myalt.style.visibility="visible";
}

Обычно делают подсказку, двигающуюся за курсором мыши. Достигается это следующим образом. Во-первых функцию нужно вызывать не onmouseover, а onmousemove, и во-вторых, строка, передаваемая в функцию movePic(), должна отправляться в тело подсказки только один раз (иначе могут возникнуть разного рода блики и прочее, особенно если в подсказке будет картинка). Ниже следует целиком код документа.

Исходный код этого примера:

<script type="text/javascript">
var hide=true;//глобальная переменная, отвечающая будет ли строка передана в подсказку

function movePic(e,word){
oCanvas = document.getElementsByTagName(
   (document.compatMode && document.compatMode == "CSS1Compat") ? "HTML" : "BODY" )[0];
myalt=document.getElementById("myalt");
// x-координата, где произошёл вызов подсказки
_x = window.event ? event.clientX + oCanvas.scrollLeft : e.pageX;
// y-координата, где произошёл вызов подсказки
_y = window.event ? event.clientY + oCanvas.scrollTop : e.pageY;
_dx=5
left=false;right=false;

if(_dx+_x+myalt.clientWidth>document.body.clientWidth){
	_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}
if(_dx+_y+myalt.clientHeight>document.body.clientHeight){
	_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;
if(hide){
	myalt.innerHTML=word;
	myalt.style.visibility="visible";
	hide=false;
	}
}
function hidePic(){
	myalt.style.visibility="hidden";
	myalt.innerHTML="";
	myalt.style.top=0;
	myalt.style.left=0;
	hide=true;
}
</script>
<div id="myalt"
 style="visibility:hidden; position:absolute; left:0; top:0;
	border-style:solid; border-color:'#000000'; border-width:1px;
	width:400px; height:10px; background-color:'#f5f5f5';
	padding:3px;z-Index:3">
</div>
<img src="../ann.jpg" width="100px" height="80px"
 onmouseover="movePic('Это ёж. Что он делает в лесу?')"
 onmouseout="hidePic()" />

Справка:
window - объект, окно браузера;
window.event - объект, информация о событиях;
document - объект, веб-страница;
document.body - объект, тело веб-страницы;
style - объект, доступ к стилям объекта;
clientX, clientY - read-only свойства event, координаты мыши относительно рабочей области браузера;
innerHTML - read/write свойство, возвращает/устанавливает html-код между тегами объекта;
clientWidth, clientHeight - readn-only свойства, возвращают реальные ширину и высоту объекта соответственно;
scrollTop - read/write свойство, возвращает/устанавливает высоту прокрученной части объекта;
onmouseout - событие, происходящее при наведение курсора мыши над объектом;
onmousemove - событие, происходящее при движении курсора мыши над объектом;
onmouseout - событие, происодящее в момент убирания курсора мыши с объекта.

Автор статьи: Фролов Станислав
Сайт автора: http://webfashion.ws