|
Всё, о чём мы рассказывали раньше, прекрасно
работает и в Netscape Navigator и в Internet Explorer.
Однако CSS предоставляет огромные возможности создания
многих динамических элементов на странице, правда, увидеть
их можно только через Internet Explorer.
Подсветка ссылки
Для того, чтобы подсветить ссылку при наведении на неё курсора
мышки, необходимо задать такую таблицу стилей:
<STYLE TYPE="text/css">
<!--
a:hover {color: red; mso-bidi-font-size:12pt}
-->
</STYLE>
В этом случае все ссылки на
странице при наведении на них курсора мышки будут подсвечиваться
красным цветом и перезаписываться шрифтом размером в 12 pt.
Для того, чтобы с одной из ссылок
этого не происходило, необходимо задать для неё принудительно
шрифт с помощью тега <font> внутри ссылки, например:
<a href=#><font
color=blue>Неподсвеченная ссылка</font></a>
Для того, чтобы одна группа
ссылок подсвечивалась одним цветом, другая другим, необходимо
несколько иначе написать таблицу стилей:
<style>
body a:Hover {color : red}
.group1 {text-decoration: none; font-family: arial; font-size:
8pt; color: black}
a:hover.group1 {text-decoration: none; font-family: arial,
font-size: 8pt; color: blue}
.group2 {font-family: arial, font-size: 10pt; color: green}
a:hover.group2 {font-family: arial, font-size: 10pt; color:
gray}
</style>
В этом случае ссылки, для которых
указан класс group1, будут отображаться неподчёркнутыми, чёрным
цветом, шрифтом Arial размером 8 pt. При наведении мышки они
станут подчёркнутыми и перекрасятся в синий цвет.
Ссылки, для которых указан класс
group2, будут подчёркнутыми и отображаться шрифтом размера
10pt зелёным цветом. При наведении мышки они станут серыми.
Изменение фона в таблице.
С помощью стилей можно творить даже такие чудеса, как изменение
цвета фона таблицы.
Для этого необходимо написать
небольшой обработчик соответствующего события, например, попадание
курсора мышки в область таблицы:
<table id=table
onMouseover="table.bgColor='red'" onMouseOut="table.bgColor='white'"
bgcolor=white border=1><tr><td>
При наведении курсора мышки на таблицу она поменяет цвет.
</td></tr></table>
При наведении мышки на область
таблицы она изменит цвет с белого на красный. Соответственно,
когда курсор мышки вновь покинет эту область, она вновь станет
белой.
Аналогичным образом можно менять
не только цвет, но и фоновый рисунок таблицы.
А вот ещё небольщой пример, который демонстрирует,
как можно с помощью CSS динамически обвести таблицу
контуром:
<table id=tabl1e
onMouseover="table1.border='2" onMouseOut="table1.border=0'"
border=0><tr><td>
<a href=#>При наведении курсора мышки на таблицу она
очертится контуром;/a>
</td></tr></table>
Как Вы можете заметить, CSS
даёт достаточно немалые возможности создания динамической
страницы для последующего отображения в Internet Explorer.
Для Netscape Navigator, чтобы реализовать что-то подобное,
требуется либо использовать графические элементы, либо слои.
Однако фиксация шрифтов работает и для того и для другого
броузера так же, как и реализация неподчёркнутых ссылок, а
это уже даёт неплохое поле для деятельности.
Вернуться
к разделу статей
|
