Динамическое изменение цвета фона ячеек при помощи CSS
Использование стилей и управление ими
с помощью JavaScript позволяет менять вид ячейки "на ходу", при
выполнении определенных условий, таких как наведение курсора на
ссылку или саму ячейку.
Рассмотрим самый простой прием - цвет фона ячейки меняется, когда
курсор мыши наводится на нее.
Наведение мыши на область отслеживается событием onMouseOver, а вывод мыши за ее пределы -
событием onMouseOut. Поскольку цвет фона
меняется у той же самой ячейки, на которую наводим курсор мыши, то
изменение стиля делается с помощью метода this.style.background.
В примере используется изменение серого цвета фона на оранжевый.В
браузере Netscape 4.x приведенный способ не работает.
Можно, также, сделать переход на другой документ при нажатии не
на саму ссылку, а на ячейку таблицы. Тогда вся ячейка превратится в
одну ссылку, а не только текст внутри нее. Надо отметить, что данный
подход не самый лучший, в силу его неочевидности, посетители
веб-сайтов привыкли, что при наведении на ссылку, курсор мыши
превращается в руку. С помощью CSS можно переопределить вид курсора
мыши, однако эта возможность доступна только для браузера Internet
Explorer.
К коду HTML предыдущего примера добавилось событие onClick, отвечающее за нажатие на ячейке и
изменение стиля курсора.
Чтобы цвет ячейки изменялся лишь при наведении на ссылку внутри
нее, следует обращаться к свойствам ячейки через ее имя. Дабы
программа знала, свойства какой ячейки изменять, используется
параметр ID, уникальным образом определяющим элемент.
Для удобства, изменение цвета ячейки оформлено в виде отдельных
функций. В связи с тем, что браузеры Internet Explorer, Netscape и
Opera используют разные подходы для динамического изменения стиля
элемента, в функциях, которые приведены в примере 3, цвет фона
меняется двумя способами. Каждый браузер выберет для себя подходящую
строку, а оставшаяся будет проигнорирована.
Указанным в примере 3 способом можно изменять цвет любой ячейки,
независимо от того, где она расположена. Наведите курсор на ссылку и
внизу нее появится цветной прямоугольник.
Текст скрипта в этом случае останется неизменным, как указано в
примере 3. Добавятся лишь идентификаторы ячеек, цвет которых следует
менять и, соответственно, параметры вызова функций.
