Решения для Netscape Navigator 4.0x
Как вы уже знаете, rollover-ы, изменяющие текст, срабатывают в Internet
Explorer 4.0, но не в Netscape Navigator 4.0. Пользователи Netscape
Navigator 4.0 могут только просматривать подобную страницу, не
наблюдая никакого эффекта. Однако, если ван нужно равное качество
просмотра и с помощью Internet Explorer 4.0 и с помощью Netscape
Navigator 4.0 вы можете достичь подобного эффекта различными
средствами. Имеются несколько путей, ведущим к этому, поэтому мы
расскажем о самом простом. Для этого будут использованы средства
обсужденные в предыдущей статье - Вращающиеся тестовые баннеры
(прочитайте её, если не читали, для прояснения этого решения).
И Internet Explorer 4.0 и Netscape Navigator 4.0 могут динамически менять код
HTML. Поэтому мы будем модифицировать тест ссылки, просто меняя ее
код. Посмотрите на следующий HTML код :
<SPAN ID="netsc" STYLE="position: absolute">
<A CLASS="item"
HREF="http://www.netscape.com/"
onMouseOver="swapClass('Netscape', 'netsc', this.href,
'item', 'highlight', true)">Netscape</A>
</SPAN>
* Обратите внимание на различные цвета. Они выделяют литералы,
которые должны быть идентичными.
Вы должны использовать такое определение для каждой ссылки на странице. Оно соостоит во внедрении сыылки в тег <SPAN>. Вы наверное удивлены, что ссылка не использует хендлер события onMouseOut. Это станет ясно после того, как будут объяснены функции, которые участвуют в создании этого эффекта. Обратите внимание на третий аргумент функции, this.href. Это свойство отображает атрибут ссылки HREF, так что вам не потребуется отображать его буквальным литеральным образом в аргументах функции.
Если вы уже определили ссылки, вам потребуется вставить общий код, который отвечает за этот эффект. Мы используем внешний скрипт для этого, но можно и страивать его в код HTML, если вам так нравится. Ниже расположены глобальные определения, состоящие из двух скриптов и одной таблицы стилей, расположенных в заголовке (<HEAD>...</HEAD>) каждой страницы :
<LINK REL="stylesheet" TYPE="text/css"
HREF="workaround.css" TITLE="rolloversheet">
<SCRIPT LANGUAGE="JavaScript">
<!--
function swapClass() { }
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="workaround.js"></SCRIPT>
Реально функция swappClass() расположена во анешем скрипте (workaround.js), но, чтобы избежать ошибок в браузерах, которые не поддерживают внешние файлы скриптов, мы должны определить пустую функцию в скрипте внутри страницы. Тег <LINK> импотирует таблицу стилей, как объяснено в предыдущей части этой статьи. Просто запомните нижеследующие строки в файле workaround.css, который и является импортируемой таблицей стилей :
.item { color: blue }
.highlight { color: red }
В этом примере цвет ссылки синий и он сменяется красным, когда мы подносим указатель мыши к ссылке. Поиграйте с цветами для получения устраивающего вас эффекта.
Т.к. этот скрипт фактически является rollover-ом, скрипт получается сложнее, чем в версии для Internet Expolorer-а. Скопируйте этот текст скрипта в файл workaround.js:
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
function display(id, str) {
if (NS4 || IE4) { // если браузер поддерживает таблицы стилей
if (NS4) { // если Navigator 4.0+
with (document[id].document) {
open(); // открыть документ
write(str); // записать в документ
close(); // закрыть документ
}
} else { // Internet Explorer 4.0+
document.all[id].innerHTML = str; // "присвоить" элементу
}
}
}
function swapClass(text, spName, urlName, oldName, clName, over) {
if (bVer < 4) { // старый браузер
return; // завершить функцию
}
// создать новую строку для ссылки
// сменить класс ссылки на clName (если был oldName)
var str = "<A CLASS='" + clName + "' HREF='" + urlName + "'";
if (over) {
// заменить onMouseOver на onMouseOut
// заменить true на falseFONT COLOR="#0000cc">
str += " onMouseOut=\"swapClass(\'" + text + "\', \'" + spName +
"\', \'" + urlName + "\', \'" + clName +
"\', \'" + oldName + "\', false)\">";
} else {
// заменить onMouseOut на onMouseOver
// заменить false на true
str += " onMouseOver=\"swapClass(\'" + text + "\', \'" + spName +
"\', \'" + urlName + "\', \'" + clName +
"\', \'" + oldName + "\', true)\">";
}
str += text + "</A>";
display(spName, str); // изменить код
}
Программа детектирования браузера и функция display() должна быть ясна из предыдущей части (и предыдущей статьи). Функция swapClass() вызывается хендлером события onMouseOver каждой ссылки. Это "переписывает" ссылку в "highlight color" , который является красным в этом примере. Эта функция использует 6 аргументов :
text - текст ссылки.
spName - значение аргумента <ID> тега SPAN.
urlName - URL ссылки.
oldName - имя старого класса (определяющего текущий цвет ссылки).
clName - имя нового класса (определящего выбранный цвет ссылки).
over - булевская переменная, определяющая, что ссылка сейчас имее стандартный цвет (в пртивоположность к активному цвету).
Функция swapClass() сначала делает код для изменяемой ссылки а затем вызывает функцию display() для настояцего изменения ссылки. Т.к. указатель мыши уже указывает на ссылку, если over сейчас true, т.е. цвет ссылки сейчас нормальный и активизирован хендлер события onMouseOver функция заменяет onMouseOver на onMouseOut. Четвертый и пятый аргумент - oldName и clName, так что делается возможным обратное действие при следующем вызове функции. Читайте комментарии к скрипту для более полного уяснения механизма работы функции.
Хотя этот браузер и работает прекрасно и в Navigator 4.0x и в Internet Explorer 4.0 и не имеет проблем со старыми браузерами имеется одно крупное ограничение. Этот скрипт может работать лишь тогда (в Netscape Navigator-е 4.0 конечно), когда ссылка расположена в конце строки (требуется для абсолютного позиционирования). И ещё, ссылка должна предваряться двумя тегами <BR><BR> (т.е. <BR> x 2). В предыдущей статье есть информация по этому ограничению.
А теперь посмотрим как работает эффект.
