Динамическое изменение цвета фона ячеек. Библиотека I2R. Использование стилей и управление ими с помощью JavaScript позволяет менять вид ячейки "на ходу", при выполнении определенных условий, таких как наведение курсора на ссылку или саму ячейку. В статье рассматриваются несколько вариантов решения.

Использование стилей и управление ими с помощью 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=#f0f0f0 onMouseOver="this.style.background='#FFCC33'"
             onMouseOut="this.style.background='#f0f0f0'"><a
             href="link1.htm">Пункт 1</a></td>

             <td align=center bgcolor=#f0f0f0><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=#f0f0f0 onMouseOver="this.style.background='#FFCC33'"
             onMouseOut="this.style.background='#f0f0f0'"
             onClick="document.location='1.html'"
             style="cursor: hand"><a href="link1.htm">Пункт
             1</a></td>

             <td align=center bgcolor=#f0f0f0><a href="link2.htm">Пункт
             2</a></td>

             </tr>

             </table>

Пункт 1

Пункт 2

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

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

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

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


           <table width=60% border=1 cellspacing=0 cellpadding=4
             bordercolor=#333333 align=center>

             <tr> 

             <td align=center bgcolor="#f0f0f0" ID="c1"><a
             href="link1.htm" onMouseOver="newColor('c1')"
             onMouseOut="backColor('c1')">Пункт 

             1</a></td>

             <td align=center bgcolor="#f0f0f0" ID="c2"><a
             href="link2.htm" onMouseOver="newColor('c2')"
             onMouseOut="backColor('c2')">Пункт 

             2</a></td>

             </tr>

             </table>

           
           <script language="JavaScript">

             function newColor(idCell)
             {

             eval('document.all.'+idCell+'.style.background = "#FFCC33"');

             eval('document.getElementById("' + idCell + '").style.background
             = "#FFCC33"');

             }
           function backColor(idCell)
             {

             eval('document.all.'+idCell+'.style.background = "#f0f0f0"');

             eval('document.getElementById("' + idCell + '").style.background
             = "#f0f0f0"');

             }

             </script>

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

Пункт 1

Пункт 2

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

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

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

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...