Распространнение эффекта на всю страницу

Теперь вы уже знаете, как менять цвет и(или) текст ссылки, когда пользователь помещает указатель мыши на него. Это очень просто - вы просто помещаете новый тэг. Однако, если вам нужно проделать с несколькими или всеми ссылками на странице, то присоединение кода может значительно увеличить размер страницы, и, как результат, время её загрузки. Однако, Internet Explorer 4.0+ (и Netscape Navigator 4.0+ в подобном случае) поддерживает всплывание событий, позволяющее перехватывать вам любое событие, происходящее в документе. В этой статье не будут обсуждаться подробности этой возможности, будет рассмотрен только пример для глобализации по странице эффекта изменения цвета ссылок. Посмотрите на код :

document.onmouseover = rollon;

Это выражение устанвливает функцию rollon() в качестве обработчика любого события onMouseOver, произошедшего на странице. С применением всплывания событий, который впервые был применен в IE 4.0, события перехватываются на уровне документа. При этом не нужно создавать отдельные, локальные обработчики события для каждого элемента для получения эффекта. Например, можно добавлять дополнительный код HTML, не добавляя дополнительногоо кода в каждом нужном месте. Обьект document является глобальным по отношению к любому другому элементу в теле страницы. Мы можем ссылаться на нужный элемент, генерирущий события, таким образом :

window.event.srcElement

Чтобы выделить некоторые элементы, которые нам нужны, мы можем собрать их в определенный класс :

<STYLE TYPE="text/css">
<!--

.item {
  color: blue;
}

.highlight {
  color: red;
}

// -->
</STYLE>

Явное применение типа удобно. т.к. позволяет добавлять и другие классы с другими настройками для состояния по умолчанию и “высвеченному” состоянию. Например, чтобы собрать нужные нам элементы, у которых будет эффект изменения цвета, мы соберем их в класс item:

<A CLASS="item" HREF="http://www.microsoft.com/">Microsoft</A>

Однако, независимо от браузера, ссылка должна быть нормально работающей. Рассмотрим “ссылку в действии” :

Microsoft

Помните, что те ссылки, в которых эффект не должен действовать, не должны быть обьединены в этот класс. Рассмотрим полный скрипт, реализующий все необходимые действия :

<SCRIPT LANGUAGE="JavaScript">
<!--

function rollon() {
  if (window.event.srcElement.className == "item") {
    window.event.srcElement.className = "highlight"; //  сменить класс
  }
}

function rolloff() {
  if (window.event.srcElement.className == "highlight") {
    window.event.srcElement.className = "item"; //  сменить класс
  }
}

// присвоить rollon() к событию onMouseOver
document.onmouseover = rollon;

// присвоить rolloff()к событию onMouseOut
document.onmouseout = rolloff;

// -->
</SCRIPT>

Если элемент принадлежит классу item, скрипт присваивает ему принадлежность к классу highlight, меняя таким образом его цвет. С другой стороны, если элемент принадлежит классу highlight , скрипт присваивает ему принадлежность к классу item, возвращая таким образом цвет по умолчанию. Хотя может показаться, что проверка условия в каждой функции избыточна, в самом деле она обеспечивает совместимость этого скрипта с разными браузерами. Кроме того, если бы не было этих проверок, эффект применялся бы к любому элементу (и не только ссылкам, но и ко всему тесту), независимо от того, нужен ли нам эффект в этом элементе или нет.

Кроме того, важно понять, почему оба глобальных выражения, document.onmouseover и document.onmouseout, не генерируют ошибку в старых браузерах, не поддерживающих их. Т.к. все браузеры с поддержкой JavaScript поддерживают обьект document, есть возможность объявить новое свойство для любого объекта. Следующее выражение полностью законно (но неработающее) :

document.blablabla = "Tomer Shiran";

Таким образом получается, что этот скрипт совместим со всеми браузерами, хотя работоспособен только в Internet Explorer-e 4+. Теперь рассмотрим несколько ссылок, которые используют эту технику :

Webreference
Doc JavaScript
Dynamic HTML Lab

Если вы используюте Internet Explorer-e 4+, каждая ссылка меняет свой цвет на красный, когда указатель мыши указывает на неё. Синтаксис этих ссылок таков :

<A CLASS="item" HREF="http://www.webreference.com/">Webreference</A><BR>
<A CLASS="item" HREF="http://www.webreference.com/js/">Doc JavaScript</A><BR>
<A CLASS="item" HREF="http://www.webreference.com/dhtml/">Dynamic HTML Lab</A>

Copyright © 1997 Mecklermedia Corporation.
All Rights Reserved. Legal Notices.
Created: October 9, 1997
Revised: Revised: December 4, 1997
Перевод: Александр Серёгин aka Free Cat 14.03.1999

Оригинальная статья: http://www.webreference.com/js/column4/