ПРОГРАММ: 654 | СТАТЕЙ: 125 | КОДОВ: 3434   

    главная        новости        программы        библиотека        коды        рейтинг       форум   

Афоризм
Остап знал 512 относительно честных способов завесить Windows'95
 
Поиск


 
Рассылка
| Soft-Ежедневник - обзор программ прямо к Вам на e-mail
 
 
Полезное!
 
7 лучших
  Перевозка мебели Харьков
  Услуги, аренда автовышек
  Хозяюшка, кушать подано!
  Замена дисплея на айфон 6 на интернет-ресурсе iphone-center.msk.ru
  Заработок от 55 000 рублей за 5 минут
  
  
 
  Библиотека > web - разработка > Web-дизайндобавить статью
Подсветка кнопок

Предположим, что у нас есть некое меню. Мы хотим, чтобы при выборе курсором мыши определенного пункта, он подсвечивался вокруг (или изменялся другим образом). Создадим две картинки...
 
infocity.kiev.ua
dweb.ru
10-05-2004
Версия для печати
печать

В прошлом уроке мы написали функции для прятания и показа слоя. Вот они:

function hideLayer(layerName) {eval(layerRef%2B"[""%2BlayerName%2B""]"%2BstyleSwitch%2B".visibility="hidden"");}function showLayer(layerName) {eval(layerRef%2B"[""%2BlayerName%2B""]"%2BstyleSwitch%2B".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>


Комментарии
Оставить комментарий

StelS | 25-10-06 10:44
мда....
понять сложно...
мне кажется можно сделать это намного проще.


BloodMan | 16-08-05 00:11
я нех не понял


den | 09-07-05 21:47
а слабо было воспользоваться фильтрами? непонтно зачем так усложнять простую задачу - есть множество способов решения :-|


Sergey N. | 19-11-04 21:47
Прекрасный сайт. Темы, так же актуальные. Всё достаточно детализировано, даже для таких чайников, каким считаю себя. Персональное спасибо IsleX за кнопки с подсветкой (полдня потерял, решая самостоятельно задачу верхнеи нижней подсветки).

Имя:
E-mail:
Сообщение:


Число=
укажите сумму чисел на картинке

   очистить

популярные статьи по теменовые статьи
Создание видео из фотографий в программе "ФотоШОУ"
Разное / Обработка фото и видео
Больница для компьютера
железо / Система
Чем так популярны социальные сети?
Разное / разное
Синхронизация данных с сотового телефона на ПК
железо / Мобильные устройства
Куплю хостинг
web - разработка / Хостинг

Опрос
На что Вы обращаете внимание в первую очередь при покупке товара в интернет-магазине?  
 
Комментарии и оценку пользователей
Наличие нескольких фотографий
Подробное и качественное описание
Условия доставки
Возможность покупки в кредит
 
Самое свежее  
 ПРОГРАММЫ

ICQ 8.0.5990
ICQ 8.0.5990

Mozilla Firefox 18.0.2
Mozilla Firefox 18.0.2

ArtMoney 7.40.4
ArtMoney 7.40.4

 НОВОСТИ

Хакерская атака на Google из Китая
Хакерская атака на Google из Китая

Мы победили! Олимпиада 2014 пройдет в Сочи
Мы победили! Олимпиада 2014 пройдет в Сочи

 БИБЛИОТЕКА

Создание видео из фотографий в программе "ФотоШОУ"
Создание видео из фотографий в программе "ФотоШОУ"

Больница для компьютера

 
Рекомендую!



Copyright © 2004-2020 MostInfo.net  | связь с админом
При использовании материалов сайта ссылка на MostInfo обязательна.