GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Динамическое изменение цвета фона ячеек(28455)
Основы работы со слоями(16432)
Единицы измерения CSS(13331)
Шрифты и CSS(10975)
Использование CSS для блочных элементов(10216)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » CSS/DHTML » Динамическое изменение цвета фона ячеек

Динамическое изменение цвета фона ячеек


Влад Мержевич
vlad@htmlbook.ru
http://www.htmlbook.ru/

Использование стилей и управление ими с помощью JavaScript позволяет менять вид ячейки "на ходу", при выполнении определенных условий, таких как наведение курсора на ссылку или саму ячейку.

Рассмотрим самый простой прием - цвет фона ячейки меняется, когда курсор мыши наводится на нее.

Пункт 1 Пункт 2

Наведение мыши на область отслеживается событием onMouseOver, а вывод мыши за ее пределы - событием onMouseOut. Поскольку цвет фона меняется у той же самой ячейки, на которую наводим курсор мыши, то изменение стиля делается с помощью метода this.style.background.

Пример 1. Изменение цвета фона

<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'"><a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>
</tr>
</table>

В примере используется изменение серого цвета фона на оранжевый.В браузере Netscape 4.x приведенный способ не работает.


Можно, также, сделать переход на другой документ при нажатии не на саму ссылку, а на ячейку таблицы. Тогда вся ячейка превратится в одну ссылку, а не только текст внутри нее. Надо отметить, что данный подход не самый лучший, в силу его неочевидности, посетители веб-сайтов привыкли, что при наведении на ссылку, курсор мыши превращается в руку. С помощью CSS можно переопределить вид курсора мыши, однако эта возможность доступна только для браузера Internet Explorer.

Пример 2. Создание ячейки как ссылки

<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'" onClick="document.location='1.html'" style="cursor: hand"><a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>
</tr>
</table>


Пункт 1 Пункт 2

К коду HTML предыдущего примера добавилось событие onClick, отвечающее за нажатие на ячейке и изменение стиля курсора.


Чтобы цвет ячейки изменялся лишь при наведении на ссылку внутри нее, следует обращаться к свойствам ячейки через ее имя. Дабы программа знала, свойства какой ячейки изменять, используется параметр ID, уникальным образом определяющим элемент.

Для удобства, изменение цвета ячейки оформлено в виде отдельных функций. В связи с тем, что браузеры Internet Explorer, Netscape и Opera используют разные подходы для динамического изменения стиля элемента, в функциях, которые приведены в примере 3, цвет фона меняется двумя способами. Каждый браузер выберет для себя подходящую строку, а оставшаяся будет проигнорирована.

Пример 3. Изменение свойств ячейки

<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor="#CCCCCC" ID="c1"><a href="link1.htm" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">Пункт
1</a></td>
<td align=center bgcolor="#CCCCCC" ID="c2"><a href="link2.htm" onMouseOver="newColor('c2')" onMouseOut="backColor('c2')">Пункт
2</a></td>
</tr>
</table>

<script language="JavaScript">
function newColor(idCell) {
if (document.all) eval('document.all.'+idCell+'.style.background = "#FFCC33"');
else eval('document.getElementById("' + idCell + '").style.background = "#FFCC33"');
}

function backColor(idCell) {
if (document.all) eval('document.all.'+idCell+'.style.background = "#CCCCCC"');
else eval('document.getElementById("' + idCell + '").style.background = "#CCCCCC"');
}
</script>

Ниже показано, как изменяется цвет фона ячейки при наведении курсора на ссылку.

Пункт 1 Пункт 2

Указанным в примере 3 способом можно изменять цвет любой ячейки, независимо от того, где она расположена. Наведите курсор на ссылку и внизу нее появится цветной прямоугольник.

Пункт #1 Пункт #2 Пункт #3 Пункт #4

Текст скрипта в этом случае останется неизменным, как указано в примере 3. Добавятся лишь идентификаторы ячеек, цвет которых следует менять и, соответственно, параметры вызова функций.

 
26.02.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.