|
|
Динамические подсказки
Введение
В этом уроке мы рассмотрим реализацию динамических
подсказок и подсветки кнопок. Эти две функции ничем принципиально не
различаются. Обе они основаны на показе и прятании слоя. Я опишу их
раздельно только для того, чтобы Вы оценили возможности применения
динамического HTML.
Подсветка кнопок
В прошлом уроке мы написали функции для прятания и показа слоя. Вот они:
function hideLayer(layerName){
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
function showLayer(layerName){
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
Воспользуемся ими для реализации нашего примера. Предположим, что у нас
есть некое меню. Мы хотим, чтобы при выборе курсором мыши определенного
пункта, он подсвечивался вокруг (или изменялся другим образом).
Создадим две картинки. Сам пункт меню и его подсветку (В зависимости от
способа подсветки скрипт пишется немного по-разному, он будет немного
проще, если подсвечивать не сверху, как у меня, а снизу).
Создадим два слоя. Один видимый с пунктом меню, другой невидимый с подсветкой.
<style type="text/css">
#button1 {POSITION: absolute; Z-INDEX: 10; LEFT: 150; TOP: 60; WIDTH: 423; HEIGHT: 45}
#highlight1 {POSITION: absolute; Z-INDEX: 15; VISIBILITY: hidden; LEFT: 150; TOP: 60; WIDTH: 423; HEIGHT: 45}
</style>
<div id="button1">
<a href="wd.html"><img src="wd.gif" width=189 height=43 border=0></a>
</div>
<div id="highlight1">
<a href="wd.html"><img src="wd-g.gif" width=189 height=43 border=0></a>
</div>
При этом Z-INDEX у пункта меню должен быть больше, чем у подсветки,
если мы подсвечиваем "снизу", и меньше, если мы подсвечиваем "сверху"
(наш вариант).
Ну а теперь воспользуемся событиями onMouseOver и onMouseOut:
<a href="wd.html" onMouseOver="showLayer('highlight1')" onMouseOut="hideLayer('highlight1')">
<img src="wd.gif" width=189 height=43 border=0>
</a>
<a href="wd.html" onMouseOver="showLayer('highlight1')" onMouseOut="hideLayer('highlight1')">
<img src="wd-g.gif" width=189 height=43 border=0>
</a>
Если используется подсветка "снизу", ссылка у подсветки не нужна:
<a href="wd.html" onMouseOver="showLayer('highlight1')" onMouseOut="hideLayer('highlight1')">
<img src="wd.gif" width=189 height=43 border=0>
</a>
<img src="wd-g.gif" width=189 height=43 border=0>
Динамические подсказки
Вы считаете, что Ваши пункты меню недостаточно информативны? Вы можете
сделать так, чтобы при наведении курсором на пункт меню в определенном
месте появлялась подсказка.
Все, что Вам для этого нужно,
это для каждого пункта меню создать невидимый слой с подсказкой. При
этом все эти слои должны иметь одинаковые позиционные параметры.
<style type="text/css">
#button1 {POSITION: absolute; Z-INDEX: 15; LEFT: 50; TOP: 60; WIDTH: 423; HEIGHT: 45}
#explain1 {POSITION: absolute; Z-INDEX: 15; VISIBILITY: hidden; LEFT: 200; TOP: 60; WIDTH: 171; HEIGHT: 116}
</style>
<div id="button1">
<a href="mailto:webmaster@webclub.ru">Почта</a>
</div>
<div id="explain1">
Нажмите сюда, если Вы хотите послать письмо вебмастеру узла.
</div>
А теперь, воспользуемся событиями onMouseOver и onMouseOut:
<a href="mailto:webmaster@webclub.ru" onMouseOver="showLayer('explain1')" onMouseOut="hideLayer('explain')">
Почта</a>
|
| Категория: HTML | Добавил: Djakob (16.10.2008)
|
| Просмотров: 501
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
Сейчас на сайте: 1 Гостей: 1 Пользователей: 0
|
& design by Sapon&manysoft-net.ru