|
Действие этого метода вы могли наблюдать на многих страницах, когда, в обычном состоянии, ссылки со страницы не подчеркнуты, а при наведении указателя мыши подчеркивание появляется (напомню, что для этого нужно просматривать страничку с помощью 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.
Перейти к рубрике --> CSS |
