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

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

Афоризм
Вюжа Де это когда вы чувствуете, что никогда не были здесь раньше.
 
Поиск


 
Рассылка
| Soft-Ежедневник - обзор программ прямо к Вам на e-mail
 
 
Полезное!
 
7 лучших
  Love-okey бесплатные знакомства
  Экобиотехнология Микрозим™: очистка окружающей среды и утилизация отходов, биоремедация
  Лучший в Рунете Видеокурс по JavaScript!
  Перевозка мебели Харьков
  Зоомагазин в г. Можайск
  
  
 
  Библиотека > 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-2021 MostInfo.net  | связь с админом
При использовании материалов сайта ссылка на MostInfo обязательна.