Free-Time.Ruна главную free-time
 
www.free-teme.ru www.free-teme.ru
Комиксы Комиксы
Комиксы детям Комиксы детям
Знаменитости Знаменитости
Автотехнтка Автотехнтка
Вооружение Вооружение
Чат Чат
Гороскопы Гороскопы
Открытки Открытки
Юмор Юмор
Кроссворды Кроссворды
Погода в мире Погода в мире
Новости Новости
Реклама Реклама

Баннер 120x60
Самое-самое Самое-самое
Азартные игры Азартные игры
Библиотека прогаммиста Библиотека прогаммиста
Все о здоровье
Драгоценности Драгоценности
Интимная жизнь Интимная жизнь
Искусство Искусство
Косметология Косметология
Кулинария Кулинария
Лирика Лирика
Лица века Лица века
Сад и огород Сад и огород
Сказки Сказки
Солюшены Солюшены
Страны и флаги Страны и флаги
ЭЭС ЭЭС
Яхты Яхты
 
 
 

анонс

Динамические подсказки и др.


Введение

В этом уроке мы рассмотрим реализацию динамических подсказок и подсветки кнопок. Эти две функции ничем принципиально не различаются. Обе они основаны на показе и прятании слоя. Я опишу их раздельно только для того, чтобы Вы оценили возможности применения динамического 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>


[Назад | Главная | Содержание раздела | Напишите нам]

Создание сайтовРазработка сайтов
Новое на сайте Новое на сайте
Восстановлена работа
чата
добро пожаловать!
Добавлен
материал в подраздел
/астрология/гороскопы
Обновлён раздел
"танки"/Стрелковое
оружие/Вооружение
Добавлен материал в раздел "дробовики"/Стрелковое оружие/Вооружение
Обновлён
подраздел
"Автоматы"/Стрелковое
оружие/Вооружение
Добавлен материал в подраздел "карточные фокусы"