Автор статьи: Головин Андрей
Спецификация CSS2 от
W3C вводит понятие «динамических псевдо-классов»: hover, active и focus. В данном случае нас интересует псевдо-класс hover. Этот класс позволяет описать стиль элемента в тот момент, когда пользователь наводит указатель на элемент, но не активизирует его (например, нажатием клавиши мыши). К сожалению, этот псевдо-класс реализован только в Internet Explorer версии 4 и выше.
Действие этого метода вы могли наблюдать на многих страницах, когда, в обычном состоянии, ссылки со страницы не подчеркнуты, а при наведении указателя мыши подчеркивание появляется (напомню, что для этого нужно просматривать страничку с помощью Internet Explorer). На странице, которую вы читаете в данный момент это реализовано с помощью следующего описания стилей:
A:link {
font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
color: #850026;
text-decoration: none;
}
A:hover {
font-size: 10pt;
color: #ff0000;
text-decoration: underline;
}
Netscape Navigator такой возможности не предлагает. Но это можно поправить. Для этого используем следующую технику. Зададим два объекта («слоя», в терминологии Netscape). Один объект будет содержать описание стиля для нормального состояния ссылки, второй — для выделенного. В нормальном состоянии второй объект спрятан, а при наведении указателя он будет показан, а первый, в свою очередь, спрятан.
Зададим описание стилей, которые будут использовать наши ссылки:
A#Norm {
font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
color: #850026;
text-decoration: none;
}
A#Hover {
font-size: 10pt;
color: #ff0000;
text-decoration: underline;
}
В качестве «контейнера» применяется элемент <ILAYER> — inline layer или встроенный слой. Этот элемент является эквивалентом <SPAN>. Применен он здесь по одной простой причине (ох уж этот Нетскейп): Навигатор правильно устанавливает описание стиля только для первого позиционированного элемента <SPAN>. используемая конструкция выглядит так:<ILAYER ID=»Norm»><A HREF=»index.html» CLASS=»Norm»>home</A></ILAYER>
Далее чуть сложнее. Сначала мы создадим новый слой, который будет содержать ссылку со стилем hover. Делаем это с помощью следующего кода:
hLayer = new Layer(ширина);
hLayer.document.write(«<A HREF=’index.html’ CLASS=’Hover’>home</A>»);
hLayer.document.close();
Мы зададим два дополнительных свойства ссылок: _layer и _hover. Первая будет указывать слой, в кором ссылка содержится, вторая — слой, который должен перекрыть текущий при перемещении указателя. В нашем случае ссылка document.layers[«Norm»].links[0] будет содержать свойство _layer = document.layers[«Norm»] и свойство _hover = hLayer — слой, созданный приведенным выше кодом.
Далее необходимо установить обработчики событий. Для нормального слоя нам необходим обработчик события onMouseOver, для выделенного — onMouseOut. В первом обработчике будет скрываться (visibility = «hidden») нормальный слой и показываться (visibility = «show») выделенный.
Установка обработчиков событий происходит так:
function showHover(ev) {
this._layer.visibility = «hidden»;
this._layer._hover.visibility = «show»;
if (ev.type==»mouseover») {
this._layer._hover.top = this.y;
this._layer._hover.left = this.x;
}
}
hLayer.document.links[0].onmouseout = showHover;
nLayer.document.links[0].onmouseover = showHover;
Здесь необходимо отметить, что созданный нами слой расположен в конце потока, поэтому позиционирован он неправильно. Для перемещения его на место первого слоя, в случае возникновения события onMouseOver мы устанавливаем его координаты соответственно координатам первого слоя. Теперь можно рассмотреть код полностью:
<SCRIPT TYPE=»text/javascript»>
function doLoad() {
if (document.layers) {
setupHover(«Norm», ‘<A HREF=»index.html» CLASS=»Hover»>страницу</A>’);
}
}
function showHover(ev) {
this._layer.visibility = «hidden»;
this._layer._hover.visibility = «show»;
if (ev.type==»mouseover») {
this._layer._hover.top = this.y;
this._layer._hover.left = this.x;
}
}
function setupHover( nID, hText ) {
hLayer = new Layer(300);
hLayer.document.write(hText);
hLayer.document.close();
hLayer.document.links[0]._layer = hLayer;
hLayer.document.links[0].onmouseout = showHover;
var nLayer = document.layers[nID];
hLayer.top = nLayer.y;
hLayer.left = nLayer.x;
hLayer._hover = nLayer;
nLayer._hover = hLayer;
nLayer.document.links[0]._layer = nLayer;
nLayer.document.links[0].onmouseover = showHover;
}
</SCRIPT>
<BODY ONLOAD=»doLoad()»>
…
<ILAYER ID=»Norm»><A HREF=»index.html» CLASS=»Norm»>страницу</A></ILAYER>
Здесь необходимо заметить, что все операции со слоями из скриптов необходимо выполнять после полной загрузки страницы. Для этого мы установили обработчик события onLoad элемента <body>, который создает новый слой и устанавливает необходимые свойства.
Для того, чтобы указанный код работал под Internet Explorer, мы должны задать еще два описания стилей для псевдо классов hover и link, что соответствует выделенному и нормальному состояниям. Примерно так, как было указано выше:
<STYLE>
A:link {
font-size: 10pt;
color: #850026;
text-decoration: none;
}
A:hover {
font-size: 10pt;
color: #ff0000;
text-decoration: underline;
}
</STYLE>
Есть еще одна сложность. Я о ней уже писал. Русский текст, выведенный с помощью методов document.write во вновь созданных слоях у меня на рабочем компьютере (WIN98, NN4.07) выводится в виде вопросительных знаков, а дома (WINNT4.0 SP3, NN4.07) — все нормально. Кто знает, как с этим бороться — пишите. Проблема, скорее всего, в «кривой» реализации поддержки Unicode.
