JS - DOM :
Кое - что о взаимодействии JS и DOM :
Всплывающая подсказка.
Не берусь судить о полезности данной опции, но вещица довольно занимательная. К тому-же в её создании
задействованы встроенные (в ОС) JS-функции - обработчики событий. Не смотря на то, что не все
браузеры реагируют на всплывающую подсказку - разобраться с ней будет просто интересно.
В чём идея всплывающей подсказки ? Создаётся контейнер со своим стилем, в контейнер помещается текст (или...), а сам контейнер привязывается к курсору, который перемещает мышка (Mouse). Причём, перемещение контейнера с текстом происходит в слое, расположенном над слоем странички, т.е. как-бы по-верх её. Эта особенность задаётся специальным атрибутом стиля - z-Index.
Создаём контейнер <div id="cont"></div> и помещаем его сразу после тэга <body>. Задаём контейнеру стиль (см. рис.12).
На что стоит обратить внимание : контейнер изначально невидим (03_рис.12) и расположен в левом верхнем углу странички (05 и 06_рис.12), ширину контейнера лучше сделать зависимой от размера текста (11_рис.12), значение z-Index:1 - условно, оно может быть любым положительным больше 0 (слой странички). Это при условии, что подсказка - единственный независимый слой. Это условие, контейнеру с подсказкой, обеспечивает его положение (04_рис.12).
00 <style type="text/css">
01 #cont
02 {
03 visibility:hidden;
04 position: absolute;
05 left:0;
06 top:0;
07 text-align:left;
08 font-size:12px;
09 border:solid 1px black;
10 border-radius:5px;
11 width:auto;
12 height:16px;
13 background-color:#ffffcc;
14 padding:3px;
15 z-Index:1; // равнозначно значению +1, но может быть и минусовым
16 }
17 </style>
рис.12
00 <script language="javascript">
01 var hide=true;
02 function moveOn(word)
03 {
04 cont.style.visibility="visible";
05 cont.innerHTML=word;
06 cont.style.left=window.event.clientX+5;
07 cont.style.top=window.event.clientY+5;
08 }
09 function moveOut()
10 {
11 cont.style.visibility="hidden";
12 cont.innerHTML="";
13 cont.style.left=0;
14 cont.style.top=0;
15 hide=true;
16 }
17 </script>
рис.12.1
А теперь - JS-функции, отвечающие за поведение контейнера с текстом подсазки (см. рис.12.1).
Элемент window - опущен, но - подразумевается.
Обе функции мы помещаем в голову странички.Согласно условия (04_рис.12.1) контейнер с подсказкой становится видимым при наведении курсора на элемент, к которому подключены эти функции, в нём есть текст (05_рис.12.1) и он находится на 5 пикселей правее и ниже курсора (06 и 07_рис.12.1). После того, как курсор уводится от элемента, контейнер с подсказкой становится невидимым (11_рис12.1) Если подумать, то можно вспомнить, что элементом в объектной модели (DOM) считается всё, находящееся в угловых скобках <...>.
Приведём пример подключения функций :
<a href="адрес ссылки" onMouseOver="moveOn('текст подсказки')" onMouseOut="moveOut()">текст ссылки</a>
Подключение функций происходит при помощи обработчиков событий (встроенные JS-функции) : onMouseOver(); - при наведении на элемент и onMouseOut(); - при уходе с элемента. Те, кто знаком с основами JavaScript, могут сказать - зачем нужны добавочные функции, если эти обработчики событий сами могут обеспечить появление всплывающей подсказки ? Попробовав и тот, и другой варианты - вы сами сможете ответить на этот вопрос.
Приведённые выше фунции - это определённый уровень использования JS. У него есть свои недостатки - если страничка не укладывается (по высоте) в размеры монитора (скроллинг), на нижних этажах подсказка может отрыватся от курсора (MS IE8.0). Эта проблемма то-же решаема, но это - следующий уровень.
Дерзайте !
...назад