Оглавление

Изменение фонового цвета строки при наведении на нее указателя мыши

Решение
Чтобы таблицу было легче воспринимать, можно изменять цвет строки при наведении на нее указателя мыши – это выделит содержимое. Такой эффект показан на рис. 5.10.

 

Выделение строки при наведении на нее указателя мыши

Рис. 5.10. Выделение строки при наведении на нее указателя мыши


Реализовать его достаточно просто, для этого достаточно добавить в таблицу стилей следующее правило:

.datatable tr:hover {
background-color: #DFE7F2;
color: #000000;
}

Готово!

 

Обсуждение
Такой документ будет корректно отображаться во всех современных браузерах, в том числе и Internet Explorer 7, но за исключением Internet Explorer 6. Однако если данные в таблице представлены логично и все
понятно и без фонового выделения, то такой эффект можно считать приятным дополнением, но не обязательным – без которого нельзя было бы пользоваться сайтом.

 

Если по каким-либо причинам вам непременно нужно реализовать данную функцию для пользователей Internet Explorer 6, можно добавить простой сценарий на JavaScript. Для изменения фонового цвета ряда таблицы при наведении на него указателя мыши в Internet Explorer 6 нужно задать необходимые свойства для CSS-класса (в этом примере я назову его hilite).

.datatable tr:hover, .datatable tr.hilite {
background-color: #DFE7F2;
color: #000000;
}

После таблицы добавьте на страницу следующий код на JavaScript:

<script type=”text/javascript”>
   var rows = document.getElementsByTagName(‘tr’);
   for (var i = 0; i < rows.length; i++) {
      rows[i].onmouseover = function() {
         this.className += ‘ hilite’;
      }
      rows[i].onmouseout = function() {
         this.className = this.className.replace(‘hilite’, ‘’);
      }
   }
</script>


В данном сценарии осуществляется поиск всех тегов <tr> в документе и присвоение каждому из них обработчика событий mouseover и mouseout.
Они присваивают рядам CSS-класс hilite при наведении на него указателя мыши и удаляют его при его смещении в другую область. Как видно на рис. 5.11, такое сочетание CSS и JavaScript приводит к желаемому результату.

 

Рассматриваемый сценарий на JavaScript динамически задает CSS-класс для тега. В данном случае мы добавляем класс hilite в тег <tr> по событию mouseover, для чего используется свойство onmouseover:

      rows[i].onmouseover = function() {
         this.className += ‘ hilite’;
      }

 

Выделение ряда в Internet Explorer 6 с помощью JavaScript

Рис. 5.11. Выделение ряда в Internet Explorer 6 с помощью JavaScript


После наступления события mouseout мы удаляем класс:

      rows[i].onmouseout = function() {
         this.className = this.className.replace(‘hilite’, ‘’);
      }


Изменяя имя класса элементов в ответ на действия пользователя с помощью JavaScript, можно добиться разнообразных привлекательных и ненавязчивых эффектов. Этот прием можно применить, например, для выделения определенной области путем изменения имени класса соответствующего элемента div по событию mouseover.

 

Примечание
Ненавязчивый JavaScript. Вы наверняка заметили, что код на JavaScript был добавлен не к самой таблице; весь сценарий был размещен только внутри элемента script. Такой прием называется ненавязчивым JavaScript; его смысл состоит в разделении документа и сценариев, подобно тому, как мы размещаем раздельно разметку и каскадную таблицу стилей.

 

 

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

 

Подробнее об этом мы поговорим в разделе «Определение различных стилей для Internet Explorer 6 и 7» главы 7.

 

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

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

8 пользователь(ей) активно (8 пользователь(ей) просматривают Инструкции)

Участников: 0
Гостей: 8

далее...

Рекомендуем

Кухонные уголки rozetka купить кухонные уголки.