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

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

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

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

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

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