Распространение эффекта на весь сайт
Если вам требуется применить эффект “ссылки с переменным цветом” к
головной странице можно просто применить технику, которая была
обсуждена в предыдущей части этой статьи. Однако, если ваш сайт состоит
из нескольких страниц (что вполне обычно) то подобное решение было бы
слишком необдуманным. В этом случае вам пришлось бы редактировать
каждую страницу, где нам нужен будет подобный эффект. В этой части
будет показано, как решить эту проблему используюя JavaScript (т.е.
программируя клиентскую часть, не прибегая к серверной части).
Прежде всего, в каждой странице добавляются 2 определения :
<LINK REL="stylesheet" TYPE="text/css"
HREF="rollover.css" TITLE="rolloversheet">
<SCRIPT LANGUAGE="JavaScript" SRC="rollover.js"></SCRIPT>
Тег <LINK> импортирует определение из внешней таблицы стилей.
Аттрибут TYPE сообщает, что таблица стилей является CSS файлом, а его
аттрибут HREF показывает браузеру его имя - rollover.css. (Это работает,
если этот файл расположен там же, где и сам файл HTML, иначе путь к
этому файлу необходимо указать в аттрибуте HREF. Сам файл rollover.css
примерно таков :
// определяется цвет ссылки
// можно добавить и иные определения стиля
A { color: blue }
<SCRIPT> - ссылка в HTML файле, определяющий внешний скрипт
(который, собственно, и отвечает за нужные нам эффекты), включаемый в
него. Этот файл, называемый rollover.js содержит следующие строки
(можно выделить из этого HTML документа методом copy-paste):
function rollon() {
if (event.srcElement.tagName == "A") {
event.srcElement.style.color = "red";
event.srcElement.onmouseout = rolloff;
}
}
function rolloff() {
event.srcElement.style.color = "blue";
}
document.onmouseover = rollon;
Этот скрипт проще, чем тот, что обсуждался в предыдущей части. Основные отличия :
- Мы используем присвоение
event.srcElement.onmouseout = rolloff; для присвоения к хэндлеру событий onMouseOut каждой ссылки
(предварительно включённой обработчиком onMouseOver). В
предыдущем скрипте мы использовали глобальное присвоение главного обработчика событий onMouseOut к функции rolloff. Мы сохраняем
ресурсы и время применяя ссылку на эту функцию к обработчику событий onMouseOut для ссылок, уже активизировавших хэндлер события onMouseOver. Кроме того, применяя подобным образом обработчик
событий onMouseOut вам не нужна условная проверка в функции rolloff().
- Предыдущий скрипт проверял имя класса обработчика события
(используя
className), в то время как функция rollon() использует
свойство элемента tagName. Это возможно по той причине, что все
ссылки участвуют в эффекте, т.к. если источник события onMouseOver или onMouseOut - ссылка (<A>), ее цвет должен быть изменен.
И самое главное различие состоит в том, что мы меняем цвет ссылки, а
не её класс. Хотя это и приводит к тому же результату, это вовсе не одно
и то же. Установкой свойства Explorer-a style.color мы можем
динамически менять цвет элемента. Следовательно, следующее
присвоение устанавливает цвет источника события onMouseOver в
красный:
event.srcElement.style.color = "red";
Как объяснено в предыдущей части, event.srcElement , отображает
элемент (в данном случае это ссылка), который сгенерировал всплывающее
событие.
Т.к. этот эффект применяется ко всем тэгам <A>, то никаких дополнений к
стандартному тэгу <A> не требуется. Здесь ссылка на страницу,
демонстрирующую эту методику.
