Веб-строительство

Вопрос

Как сделать ячейку таблицы ссылкой (без графики), чтобы при наведении указателя мыши на ячейку, background-цвет ячейки менялся на заданный цвет?
Мой хостинг-сервер поддерживает только CGI и PHP скрипты.

Ответ

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

Использование стилей и управление ими с помощью JavaScript позволяет менять вид ячейки Lна ходу¦, при выполнении определенных условий, таких как наведение курсора на ссылку или саму ячейку.
Можешь не боятся, твой сервер это держит.

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

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

Пример 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>

К коду 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="#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)
{ eval('document.all.'+idCell+'.style.background = "#FFCC33"');
eval('document.getElementById("' + idCell + '").style.background = "#FFCC33"'); }
function backColor(idCell)
{ eval('document.all.'+idCell+'.style.background = "#CCCCCC"');
eval('document.getElementById("' + idCell + '").style.background = "#CCCCCC"'); }
</script>

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

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

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

Из конференции Expert_FAQ