|
|||
|
|||
:hover в навигаторе |
|||
Спецификация CSS2 от W3C вводит понятие "динамических псевдо-классов": hover, active и focus. В данном случае нас интересует псевдо-класс hover. Этот класс позволяет описать стиль элемента в тот момент, когда пользователь наводит указатель на элемент, но не активизирует его (например, нажатием клавиши мыши). К сожалению, этот псевдо-класс реализован только в Internet Explorer версии 4 и выше. Действие этого метода вы могли наблюдать на многих страницах, когда, в обычном состоянии, ссылки со страницы не подчеркнуты, а при наведении указателя мыши подчеркивание появляется (напомню, что для этого нужно просматривать страничку с помощью Internet Explorer). На странице, которую вы читаете в данный момент это реализовано с помощью следующего описания стилей: A:link { Netscape Navigator такой возможности не предлагает. Но это можно поправить. Для этого используем следующую технику. Зададим два объекта ("слоя", в терминологии Netscape). Один объект будет содержать описание стиля для нормального состояния ссылки, второй - для выделенного. В нормальном состоянии второй объект спрятан, а при наведении указателя он будет показан, а первый, в свою очередь, спрятан. Зададим описание стилей, которые будут использовать наши ссылки: A#Norm { В качестве "контейнера" применяется элемент <ILAYER> - inline layer или встроенный слой. Этот элемент является эквивалентом <SPAN>. Применен он здесь по одной простой причине (ох уж этот Нетскейп): Навигатор правильно устанавливает описание стиля только для первого позиционированного элемента <SPAN>. Используемая конструкция выглядит так: <ILAYER ID="Norm"><A HREF="index.html"
CLASS="Norm">home</A></ILAYER> Далее чуть сложнее. Сначала мы создадим новый слой, который будет содержать ссылку со стилем hover. Делаем это с помощью следующего кода: hLayer = new Layer(ширина); Мы зададим два дополнительных свойства ссылок: _layer и _hover. Первая будет указывать слой, в кором ссылка содержится, вторая - слой, который должен перекрыть текущий при перемещении указателя. В нашем случае ссылка document.layers["Norm"].links[0] будет содержать свойство _layer = document.layers["Norm"] и свойство _hover = hLayer - слой, созданный приведенным выше кодом. Далее необходимо установить обработчики событий. Для нормального слоя нам необходим обработчик события onMouseOver, для выделенного - onMouseOut. В первом обработчике будет скрываться (visibility = "hidden") нормальный слой и показываться (visibility = "show") выделенный. Установка обработчиков событий происходит так: function showHover(ev) { Здесь необходимо отметить, что созданный нами слой расположен в конце потока, поэтому позиционирован он неправильно. Для перемещения его на место первого слоя, в случае возникновения события onMouseOver мы устанавливаем его координаты соответственно координатам первого слоя. Теперь можно рассмотреть код полностью: <SCRIPT TYPE="text/javascript"> Здесь необходимо заметить, что все операции со слоями из скриптов необходимо выполнять после полной загрузки страницы. Для этого мы установили обработчик события onLoad элемента <body>, который создает новый слой и устанавливает необходимые совойства. Для того, чтобы указанный код работал под Internet Explorer, мы должны задать еще два описания стилей для псевдо классов hover и link, что соответствует выделенному и нормальному состояниям. Примерно так, как было указано выше: <STYLE> Есть еще одна сложность. Я о ней
уже писал.
Русский текст выведенный с помощью
методов document.write во вновь
созданных слоях у меня на рабочем
компьютере (WIN98, NN4.07) выводится в виде
вопросительных знаков, а дома (WINNT4.0 SP3,
NN4.07) - все нормально. Кто знает как с этим
бороься - пишите.
Проблема, скорее всего, в "кривой"
реализации поддержки Unicode. Исходя из
этого пример, который идет дальше, будет
на английском языке: Back to Источник: http://exper.ural.ru/
|
|||
|
|||
Copyright © "Internet Zone", info@izcity.com | |||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |