Главная
К библиотеке
Military.com Free Screensavers!

"Hover" в Навигаторе

Спецификация 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>

http://exper.ural.ru/

Hosted by uCoz