Начинающим Web - разработчикам сайтов

Категории
Полезные сайты
Способы измениния элементов
Свойства объектов
Методы объектов
События объектов
Применение DHTML

Способы измениния элементов

Способы измениния элементов

Как уже говорилось, в самом начале этого раздела нашего сайта, посредством языка DHTML можно изменять различные параметры элементов. Зная азы свойств, методов и событий объектов можно приспупить к рассмотрению их практического применения. В простых манипуляциях со свойствами элементов даже не понадобится дополнительно использовать Java-скрипты. К такому роду манипуляциям относится все то, что было нами рассмотренно на предыдущих страницах данного раздела.

Итак, чтобы изменять свойства элементов необходимо выбрать элемент, в тэге которого необходимо указать первоначальные значения (до события), затем назначить событие и далее, посредством ключевого слова this присвоить значения, которые будут у элемента во время события. При этом описание значений элементов (стилей) производится по принципу уже знакомых вам - каскадных листов стилей, т.е. используя атрибут STYLE с указанием всех параметров элемента в одних общих кавычках.

Вообщем, формула записи кода, при изменении стилей у элементов, такова:

<Тег STYLE ="описание _элемента_до_события"
событие_1="
this.style. описание_изменяемых_свойств_элемента_при_событии"
. . . . . . . . . . .
событие_n="
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 ), затем в созданной кнопке или ссылке помещается событие и обащение к элементу по идентификатору. Пример - создадим таблицу с идентификатором:

<TABLE width="560" height="50" border="0" align="center" bgcolor="#999966" ID="block1">
<TR><TD align="center" class="sel_1">Изменение ширины </TD></TR></TABLE>

Изменение ширины

потом установим кнопку с назначением события и обращением к нужному элементу:

<DIV align="center"><INPUT type="button" value="Изменить таблицу"
onClick='document.all["block1"].style.width="220px";'></DIV>

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

Итак, теперь о синтаксисе применения визуальных фильтров. Имеет он следующую формулу:

STYLE="filter:ИМЯ_ФИЛЬТРА( параметр_1=значение ......параметр_n=значение)"

Другие применения DHTML

Другие применения данного языка огранины лишь его возможностями и вашей фантазией. Желаем успехов.

Начинающим Web - разработчикам сайтов
Rambler's Top100 Рейтинг@Mail.ru
Hosted by uCoz