Главная :: Уроки :: Actions :: Галерея :: Шаблоны :: Услуги :: Форум :: О нас
Плагины Photoshop
  .: Flaming Pear
  .: Panopticum
  .: Vizros
  .: Другие
  .: Поиск плагинов
  .: Как создать плагин

Для веб-мастера
  .: Техника создания лого
  .: Баннеры (советы)
  .: Советы веб-мастерам
  .: Web-дизайн со стороны
  .: Регистрируем сайт
  .: Столпы интернета
  .: Динамика с CSS
  .: Web-пауки



Инфо

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, чтобы реализовать что-то подобное, требуется либо использовать графические элементы, либо слои. Однако фиксация шрифтов работает и для того и для другого броузера так же, как и реализация неподчёркнутых ссылок, а это уже даёт неплохое поле для деятельности.


Автор: Александр Рыбников

© Copyright CC-Studio. Все права защищены. -- Designed By Топорков Сергей -- cc-studio@yandex.ru
Использование материалов сайта без разрешения автора запрещено
Rambler's Top100 Rambler's Top100 Рейтинг@Mail.ru разработка сайтов новый форум и сайт разработка москва.