RTFM! статьи, советы, скрипты
::Заработок с помощью сайта ::JScript по-русски! ::Все русские мануалы::
МЕНЮ
О САЙТЕ
НОВОСТИ
СТАТЬИ
КНИГИ
АППЛЕТЫ
СВЯЗЬ

СЧЕТЧИКИ
Rambler's Top100
Рейтинг@Mail.ru
Яндекс цитирования

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

Автор: cetis Сайт: http://www.cetis.ru     Рейтинг: N/A из 7       <<НАЗАД
   
   Введение
   В этом уроке мы рассмотрим реализацию динамических подсказок и подсветки кнопок. Эти две функции ничем принципиально не различаются. Обе они основаны на показе и прятании слоя. Я опишу их раздельно только для того, чтобы Вы оценили возможности применения динамического 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>
   
   
   


<<НАЗАД      ОЦЕНИТЬ СТАТЬЮ    ВЕРСИЯ ДЛЯ ПЕЧАТИ>>
Статья прочитана :  раз.




пейкюлю



 
 
 
 
 
pauk ©® 2000-2015. All rights reserved.
При перепечатке ссылка на сайт и указание обязательны.
Мнение администрации сайта не всегда совпадает с мнением автора.
Орфография и пунктуация - авторские.
Администрация не несет никакой ответственности за использование материалов.
.
Protected by Copyscape DMCA Takedown Notice Infringement Search Tool