Как уже говорилось, в самом начале этого раздела нашего
сайта, посредством языка
DHTML
можно изменять различные параметры
элементов. Зная азы свойств, методов и событий объектов можно приспупить
к рассмотрению их практического применения. В простых манипуляциях
со свойствами элементов даже не понадобится дополнительно использовать
Java-скрипты. К такому роду манипуляциям относится все то, что
было нами рассмотренно на предыдущих страницах данного раздела.
Итак, чтобы изменять свойства элементов необходимо выбрать
элемент, в тэге которого необходимо указать первоначальные значения
(до события), затем назначить событие и далее, посредством ключевого
слова
this
присвоить значения, которые будут у элемента во время события.
При этом описание значений элементов (стилей) производится по принципу
уже знакомых вам - каскадных листов стилей, т.е. используя атрибут
STYLE
с указанием всех параметров элемента в одних общих кавычках.
Вообщем, формула записи кода, при изменении стилей
у элементов, такова:
Теперь приведём конкретный пример изменения фонового
цвета в блоке, при наведении на него указателя мыши. Записав нижеуказанный
код в "тело" страницы:
<DIV STYLE="width:560px; height:50px; background-color:#999966"
onMouseOver="this.style.backgroundColor='#CCCC99'"
onMouseOut="this.style.backgroundColor='#999966'">Получим
то, чего хотели. </DIV>
Получим то, чего хотели.
Изменять таким способом можно все, что предусмотренно в
CSS
.
Кроме того посредством событий таких элементов, как кнопок
и ссылок можно манипулировать свойствами сторонних элементов. Для
этого предваритетельно ресспанденскому элементу назначается идентификатор
(
ID или
NAME
), затем в созданной кнопке или ссылке помещается событие
и обащение к элементу по идентификатору. Пример - создадим таблицу
с идентификатором:
Применять событие и выбирать свойство по по последнему,
из рассмотренных способов, можно только один раз, в противном
случае используется сценарий
JavaScript.
Способы создания меню на DHTML
Динамическое меню, составленное с помощью
DHTML отличаются
от своих "собратьев", написанных на
JavaScript
, простотой как в их разработке, так и полученным результатом
- их функцианальности. Но даже такие меню куда более удобне и
приятнее глазу посетителя, чем банальный набор ссылок. По своему
построению они делятся на
вертикальные и
горизонтальные
, которые
в свою очередь могут содержать своего рода
выпадающие списки (появляются
от таких дейсвий пользователя, как наведение указателя мыши или
её щелчок на подзаголовок меню). Детали меню могут быть выполнены
в виде
кнопок,
изображений с "линками" и простых текстовых
ссылок
. В основном при разработке меню используется табличный метод
.
В помощь разработчику для создания динамического меню
существует немалое колличество редакторов, которые конструируют
меню в визуальном режиме, интегрируя его в HTML-код страницы
(либо в отдельный файл). Большинство из таких редакторов используют
сразу два языка программирования (совмещая друг друга) -
DHTML и
JavaScript
. По удобству и набору функциональных возможностей, на наш взгляд,
стоит выделить
Sothink DHTMLMenu и
DHTML Menu
Builder.
Применение фильтров DHTML
Данные фильтры представляют собой команды браузеру на
обработку элемента, дающие большие возможности при оформлении
элементов страниц сайта (в основном графических и находящихся
к контейнере
<DIV>). Среди явных преимуществ у рассматриваемых
фильтров имеется существенный недостаток - они поддерживаются
лишь браузером
Microsoft Explorer
. Поэтому применяйте их по своему усмотрение. Ниже приведен их
основной (не полный) перечень в алфавитном порядке с описанием
при применении:
Фильтр
Эффект применения и возможные
параметры
Alpha
установка эффекта "прозрачность"
на элемент целиком или на укзанный градиент. Значение
от 0 до 100, где 0 - прозрачно 100 - не прозрачно.
Blur
размытие объекта. Возможные
параметры -Add (добавить размытие со значениями 1 - да и 0 - нет),
Direction (угол направления размытия со значением от 0 до 315, где шаг равен 45,
Strength
(назчение
числа пикселей на квадратный дюйм).
Chroma
прозрачность для конкретного цвета
RGB,
где в параметре указывается такой цвет).
DropShadow
эффект сложной тени для элемента.
Параметры -
Color (цвет в RGB),
OffX (смещение в px по оси X),OffY
(смещение по оси Y),
Positive
- создание тени по характеру пикселей (значение 1 -
для видимых и 0 - для невидимых).
FlipH
разворачивание элемента по горизонтальной
оси.
FlipV
разворачивание элемента по вертикальной
оси.
Glow
сияющий эффект. Параметры -
Color (цвет сияния в RGB) и
Strength (концентрация от 0 до 100).
Gray
перевод элемента в черно-белый цвет.
Invert
отображение элемента в негативе
(инверсия цветов).
Light
осветление элемента.
Mask
назначение цвета для выделяемого
объекта пользователем, где параметр
Color - цвет в
RGB.
Shadow
простая тень для элемента. Параметры
-
Color (цвет в RGB) и
Direction (угол направления
тени от 0 до 315 с шагом 45).
Wave
эффект волны, где можно
присваивать следующие параметры:
Add - добавлять (значение
еденица) или нет (0),
Freq - число волн (знач. - целое
число),
LightStrength - амплитуда волн (знач. - от
0 до 100),
Phase - угловое смещение волн (в %, где
100% = 360 град.),
Strength
- числовое значение интенсивности эффекта.
Итак, теперь о синтаксисе применения визуальных фильтров.
Имеет он следующую формулу:
