Введение
Итак, вы уже умеете делать простейшие HTML странички, выводя на них текст,
рисунки и даже пускать бегущую строку. Но все же, путешествуя по Интернету, вы
каждый раз поражаетесь красоте и качеству, с которым выполнены тамошние
страницы. Оговорюсь сразу - это пособие не сделает из вас профессионального
дизайнера Web страниц, но при наличие элементарной фантазии и желания дочитать
этот текст до конца, вы сможете поднять свой уровень до будущего
профессионального креатора HTML.
Так что такое Dynamic HTML? DHTML - это набор нововведений в Microsoft Internet
Explorer 4.0, которые позволяют автору страницы динамически менять стили,
содержание и оформление страницы, создавать интерактивные документы, реагирующие
с пользователем в реальном масштабе времени. Короче, DHTML - это красота в Web
страницах.

Глава 1. Динамические стили .
Динамические стили - одно из оснований DHTML. Путем нехитрых функций вы можете
менять внешний вид любого элемента в любой момент времени, например, цвет ссылки
изменится, когда пользователь наведет на нее курсор.
Каждый объект HTML имеет набор свойств, определяющих его внешний вид. Все они
объединены в подмножестве Style. Доступ к этим свойствам можно получить двумя
путями: через язык HTML - общепринятый набор описаний для HTML документа, или
через несколько других Web-языков - JavaScript, JScript или VBScript. Если
учесть, что перые два - практически одно и тоже, то остается, что выбор не так
уж и велик. Поскольку язык JScrript является (на мой вкус) самымы легким, а
также самым распространенным, далее в этом документе будет употреблен именно он.
При этом, так как мы не собираемся вдаваться в дебри программирования на новом
незнакомом языке, его изучению здесь не будет придано очень пристального
внимания, а только приведены самые элементарные примеры его использования. Если
вы уже немного знакомы с этим языком или имеете представление о том, как
вставлять в HTML документ объект Script, то можете идти дальше, если же нет,
прочтите краткий курс об этом, воспользовавшись этой ссылкой.
Итак, с помощью динамических стилей вы можете менять любое визуальное свойство
объекта - цвет, размер, видимость и многое другое. Производить эти операции
легко с помощью Script языков, в нашем случае это будет JScript.
Далее,вы сможете получить информацию по следующим разделам:
Создание динамических стилей
Установка стиля объекта
Классы
Изменение стиля через Script-язык
Динамика в самом Internet Explorer 4.0

Сделаем стили динамическими
Динамический - означает изменение свойcтв в реальном времени, например при
совершении какого-либо события. События - это ядро любых современных языков
программирования. Следующая строчка, вставленная в стандартное ядро HTML
страницы заставляет объект заголовка изменить свой цвет, когда пользователь
наведет на него мышь.
<H1 onmouseover="this.style.color='red';">Эта строка покраснеет</H1>
Этот простой пример иллюстрирует доступ к свойству color элемента H1. Все
действие, собственно, происходит в выражении
onmouseover="this.style.color='red'"; Это выражение языка JScript означает, что
при происхождении события onmouseover объект, с которым произошло событие
(this-это), его множество style и свойство в этом множестве - color должно
поменять свое значение на 'red'. (Заметьте, что red пишется в одинарных
кавычках. Это значит, что red - символьная строка, а не какая-нибудь переменная)
Чтобы при выходе из зоны объекта, он снова менял свой цвет, например обратно,
используйте событие onmouseout.
<H4 onmouseover="this.style.color='red';"
onmouseout="this.style.color='black';">
Эта строка динамически изменяет свой цвет
</H4>
Эта строка специально, чтобы вы убедились
Можете попробовать использовать событие onclick, которое происходит при щелчке
мыши на объекте.
Теперь, вы можете реально использовать этот момент, например в ссылках. Добавьте
приведенный выше код к объекту <A>.
Установка стиля объекта
Мы научились динамически изменять стили. Но это еще не самая главная
возможность, предоставляемая DHTML. А что, если вам не нравится стандартный
стиль оформления страницы, который использует Internet Explorer? Почему ссылки
всегда должны иметь синий цвет, а шрифт размер в 16 пикселей? Нельзя ли
как-нибудь изменить это? Можно! И нужно! Если вы хотите, чтобы ваши страницы
отличались от множеста других, выделялись чем-то необычным и максимально
действовали на восприятие их посетителя, используйте нестандартные стили! Но это
не значит, что вы должны все свои сообщения писать кислотно желтым цветом, тут
уж дело вкуса, главное то, что Dynamic HTML дает возможность использовать свою
фантазию, предоставляя богатейший набор возможностей.
Так как же установить нестандартный стиль объекта? Прежде всего через свойство
STYLE. Посмотрите:
<H2 STYLE="color: green; cursor: hand">Наведи на меня мышь</H2>
Эта строка будет выводить на экран объект <H2> зеленого цвета, причем курсор,
при наведении на него будет изменять свой вид на "руку", которая обычно
сигнализирует то, что этот объект можно "щелкнуть".
Здесь, объекту были установлены два свойста, подобным образом можно менять все
свойства, которые поддерживает объект.Например:
<H2 STYLE="font-size: '20px'; font-weight: bold; cursor: size; background-color:
lightgrey">
Это пример использования стилей
</H2>
Классы
Стили можно устанавливать не только таким образом. Очень удобно использовать для
установления стилей объектов классы. Под классом здесь подразумевается набор
неких свойств и их значений, объединенный в один класс. Классу присваивается
имя, а затем весь этот набор свойств можно установить для какого-либо
конкретного объекта. Это очень удобно, если, например, у вас имеется несколько
ссылок и для каждой из них надо установить красный цвет текста и нежно-голубой
цвет фона, а также жирный шрифт, то не надо мучать себя и набивать каждый раз
эти установки в свойстве Style каждого объекта, сделайте следующим образом:
<HTML>
<HEAD>
<STYLE>
.myStyle {color: red; background-color: lightblue; font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<!-- ... Какой-то код >
<A HREF="gotonowhere.htm" CLASS=myStyle>Ссылка с применением класса</A>
<!-- ... Еще какой-то код>
</BODY>
</HTML>
Как видите, здесь приведен пример использования класса, он же набор свойств.
Класс определяется в блоке <HEAD> с помощью блока <STYLE> Таких классов может
быть определено великое множество и у них могут быть любые дозволительные имена.

Изменения стиля через Script-язык
Это еще не все способы изменения стиля. В самом начале этой главы, мы учились
динамически изменять стили. Давайте рассмотрим еще один способ изменения,
теперь, через объект <SCRIPT>. Если вы не особо разберетесь, о чем пойдет дальше
речь, воспользуйтесь этой ссылкой.
Итак, чтобы изменять стили объекта, над которым совершится действие, напишем
функцию. Написание функций также полезно, когда над множеством объектов надо
производить одинаковые действия. Начнем как всегда с простого, например, со
списков. Посмотрите на следующий код:
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
function changeStyle(object) {
if (object.style.color=='black')
object.style.color='orange';
else
object.style.color='black';
}
</SCRIPT>
<LI>Элемент 1
<LI style="cursor: hand"; onclick="changeStyle(this);">Элемент 2
</BODY>
</HTML>
Использование Script-языков дает очень гибкие возможности применения
динамических стилей. В этом примере при щелчке мышью на второй элемент списка,
он изменяет свой стиль с помощью функции changeStyle, которой в качестве
аргумента передается объект, над которым было произведено действие.
Комбинирование использования функций и классов, а также различных событий c
вашей фантазией дает поистине потрясающие результаты.
Динамика в самом IE 4.0
Internet Explorer 4.0 обладает гибким свойствами прорисовки экрана и
отображения на нем представляемой информации. Например, если вы изменили размер
шрифта строчки и она теперь не помещается в отведенное ей место, остальные
строки раздвинутся, чтобы не произошло их наложение одно на другую.
Проиллюстрировать эту особенность очень хорошо может свойство display часто
применяемой в создании динамических оглавлений. Вот пример:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
function changeDisplay(object) {
if (object.style.display=='none')
object.style.display='';
else
object.style.display='none';
}
</SCRIPT>
<P> Если вы наведете курсор </P>
<P onclick="changeDisplay(document.all.disappearingString);" style="cursor:
hand; color: blue">
на эту строку и 'кликните' ее, </P>
<P id=disappearingString>то эта строка исчезнет</P>
<P> А эта займет ее место<p>
</BODY>
</HTML>
Здесь комментарии излишни. Наблюдайте, как реагирует IE на изменение стилей
содержимого окна.

Глава 2. Изменение стилей различных объектов.
В этой главе продолжается ознакомление с различными способами изменения стилей
различных объектов. Как мы уже выяснили, Dynamic HTML позволяет менять различные
аттрибуты объектов, например, аттрибут SRC у объекта <IFRAME> или STYLE у
объекта <DIV>.
В этой главе вы сможете найти информацию по следующим вопросам:
Изменение стиля у объекта <IFRAME>
Почему классы?
О значениях свойств

Изменение стиля у объекта <IFRAME>
Объект <IFRAME> позволяет вставлять в текущий документ окно, в котором будет
содержаться частью или полностью другой документ HTML. Путь, по которому
находится вставленный документ, указан в свойстве SRC объекта IFRAME. Изменив
его, вы сможете менять содержимое этого объекта. Но это еще не все. Так же, как
вы обращаетесь к объектам главного докумета, вы можете обращаться к объектам и
вставленного докумета. В доказательство, вот вам следующий пример, который
иллюстрирует, как изменять содержимое объекта IFRAME и изменять цвет фона
вставленного документа, не зависимо от его текущего содержимого.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function change_image() {
document.all.myiframe.src="frame_content2.htm";
}

function change_background() {

document.frames.myiframe.document.body.style.backgroundColor="green";
}
</SCRIPT>
</HEAD>
<BODY>
<IFRAME id=myiframe src="frame_content.htm"> </IFRAME>
<P onclick="change_image()" style="cursor: hand; color='blue'">
Изменение содержимого IFRAME
</p>
<P onclick="change_background()" style="cursor: hand; color='blue'>
Изменение фона IFRAME
</P>
</BODY>
</HTML>
Для совершения вышеуказанных действий написаны две функции.
Первая - change_image() - изменяет содержимое объекта IFRAME. Обратите внимание,
что этому объекту присвоено имя myiframe. Обратите внимание, как происходит
доступ к объекту. Строка document.all.myiframe служит именно для этого. По своей
сути она является путем, где главным в иерархии стоит document, через все его
объекты (all) выходят непосредственно на myiframe, ну а уж у него используют
свойство src. Да, и еще надо оговорится, что с самого начала подразумевается
существование двух неких файлов HTML: frame_content.htm и frame_content2.htm,
которые являются источниками для IFRAME. Сначала, в объекте находится
содержимое frame_content.htm, а потом, после щелчка на соответствующую строчку,
используется файл frame_content2.htm.
Когда пользователь нажмет на вторую строчку в основном документе, заработает
функция change_background(). Она также использует иерархию доступа к объектам,
чтобы изменить фон документа, который находится в IFRAME. Заметьте, что функция
меняет фон второго документа, а не фон самого объекта IFRAME.
У второй функции также нет параметров, но вы можете поэкспериментировать,
передавая ей значение цвета, на который вы хотите изменить фон. Тогда ее вызов
будет выглядеть примерно так: onclick="change_background('цвет')", а в самой
функции надо произвести следующие изменения:
function change_background(color) {
document.frames.myiframe.document.body.style.backgroundColor=color;
}
Теперь color пишется без кавычек, потому-что это не название цвета, а имя
переменной, аргумента функции. В качестве этого аргумента вы можете передавать
любое корректное название цвета. Я же говорил, что функции позволяют действовать
очень гибко!
Почему классы?
В первой главе вы познакомились с понятием классов, как объединений аттрибутов
объекта. В этой главе мы продолжаем их обсуждение.
Есть два способа задания стиля объекта: первый - это напрямую, например,
this.style.color='red' или document.all.myHeading.style.fontSize='20px'. Все это
примеры прямого доступа к свойству объекта.
Второй способ - это использование классов. Используя их, вы можете задать сразу
несколько строк. Так почему классы? Когда у вас на странице есть множество
объектов примерно одинакового назначения, вы можете использовать для них
глобальные стилевые установки, применяя для всех этих объектов один стиль.
Каждый объект имеет аттрибут, который связывает его с определенным классом.
Через этот аттрибут легко задать стиль объекта, сопоставляя его определенному
классу. Кроме того, вы можете динамически изменять аттрибут класса,
соответственно меняя стиль объекта.
В этом примере показано, как можно производить динамическую смену класса.
<HTML>
<HEAD>
<STYLE>
.textRed {color:red}
.textBlack {color:black}
</STYLE>
</HEAD>
<BODY>
<H1 class=textBlack onmouseover="this.className='textRed'"
onmouseout="this.className='textBlack'">
Наведи на меня мышь, чтобы посмотреть, как классы динамически меняются
</H1>
</BODY>
</HTML>
Определено два класса под именами textRed и textBlack. При инициализации,
объекту <H1> присваивается класс textBlack, обратите внимание, что в этом случае
используется аттрибут class, а имя класса пишется без кавычек. Это происходит
потому, что этот код является частью языка HTML, а вот когда имя класса надо
сменить, в двойных кавычках находится часть Script-языка, поэтому используется
аттрибут className, и имя класса пишется в одинарных кавычках.
С помощью классов вы можете менять все аттрибуты стиля за исключением
позиционирования (position). Вы не можете определить стиль позиционирования:
абсолютный или непозиционированный иначе, как через прямой код HTML.
О значениях свойств
Когда вы присваиваете значения аттрибутам, помните, что эти значения всегда -
строки. Поэтому, вы не можете манипулировать значениями свойств в математическом
смысле. И специально для этого было введено несколько свойств, значения которых
- целые числа.
Например, свойство pixelHeight - целое число. Оно отображает в пикселах значение
аттрибута height. posHeight - также целое число. Оно отображает свойство height
в величине, в которой автор страницы задал это свойство.
Если свойство предполагает некоторое разнообразие величин, вы можете указывать
величину, в которой вводите значение. В следующих примерах используются величины
points и pixels. Они задаются соответственно указателями pt и px.
document.all.MyElement.style.fontSize = "24pt";
document.all.MyElement.style.fontSize = "120px";
Если вы не задаете указатель, используется значение по умолчанию. Есть одно
преимущество этого: вы можете указать значение свойства, как целое число. Две
следующие строки идентичны:
document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;

Глава 3. Создание оригинальных стилей
Internet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль
предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и
синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять
различные аттрибуты напрямую. Даже если одинаковых по значению объектов и много,
вы уже умеете применять классы. Но существует еще одна возможность. Для задания
всего стиля документа целиком применяются так называемые Иерархические Стилевые
Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок
свойств различных объектов. Чем-то они напоминают классы, но если класс
сохдается внутри документа и может быть применен, а может быть и нет, то CSS,
если он подключен, то установки в нем влияют непосредственно на все объекты в
документе.
Далее будут рассматриваться следующие темы:
Введение в CSS
CSS, описываемые в странице
CSS, подключаемые из файла
Динамическое изменение стилей с помощью CSS

Так что такое CSS?
CSS очень похожи на классы, только с той разницей, что в них описывается стиль
для уже известного объекта. Для наглядного примера, осмотрите сейчас свой
комнату (офис, зал...) в которой вы находитесь. Наверняка, вы увидите множество
различных предметов (стол, кресло, окно, компьютер). У каждого из этих
предметов-объектов есть характеристики, и вам надо составить список этих
предметов и их характеристик. Может быть у вас получится нечто следующее:
стол:
цвет - коричневый
материал - деревянный
компьютер:
цвет - белый
материал - пластмасса
назначение - для работы
Конечно, вы можете пойти другим путем, но только CSS составляются именно так,
где вместо предметов выступают объекты, да и их характеристики немножко другие.
Для примера, вот вам отрывок такого документа:
body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}

h1
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}
Здесь задается каким будет стиль элемента BODY и H1. Те параметры, которые не
заданы, остаются по умолчанию.
Создание CSS не требует особых усилий и может быть выполнено в простом блокноте,
хотя для этих целей и существуют специальные программы, облегчающие работу и
наглядно показывающие, каким будет выглядет будущий документ с применением этого
стиля. Поищите такие программы у себя на диске или у знакомых.
Стилевая таблица в документе
Существует два способа подключения CSS. Первый - задать ее в элементе STYLE в
начале документа, как класс. Это делается так:
<HTML>
<HEAD>
<STYLE>
H1 {color: red}
H2 {color: red; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1> Этот документ</H1>
<H2>использует стилевые таблицы</H2>
</BODY>
</HTML>
В данном примере, на экране вы увидите две строки, состоящие из двух объектов:
H1 и H2. Посмотрите, во что превратился стиль по умолчанию Internet Explorer. А
ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким
образом, сколько бы вы ни наделали объектов H1 и H2, их стиль всегда будет
таким, каким вы его указали в стилевой таблице.
Стилевая таблица в отдельном файле
Если вам нравится стиль, который вы создали и вы хотите использовать его во всех
своих документах. Или ваш документ состоит из множества HTML страниц и у всех
них должен быть одинаковый стиль, вам необязательно каждый раз вколачивать
строки стилевой таблицы в начале документа.
Второй способ подключения CSS к Web-странице - это создание CSS в отдельном
файле, а в самой странице делается ссылка на этот файл. Тогда, вы можете
написать в странице только одну строчку и все равно стиль ее будет таким, каким
он определен в стилевой таблице во внешнем файле. Думаю не надо долго говорить о
преимуществах такого способа.
Итак, сперва вы создаете таблицу, следуя указанным выше правилам. Затем, вы
добавляете в элемент <HEAD> для включения таблицы стилей строку подобную
следующей:
<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">
LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают
элемент, как стилевую таблицу, ну а HREF содержит адрес, по которому находится
файл с вашей CSS.
Динамическое изменение CSS?
Вы можете динамически измнять имя подключаемого файла со стилевой таблицей,
соответственно изменяя сам стиль. Вот функция, на языке JScript, которая при ее
вызове, если уже применен какой-либо стиль, убирает его и подключает новый.
function change_style() {
if (document.styleSheets.href != null)
document.styleSheets.href = "newStyle.css";
}
Если стилевая таблица определена внутри HTML-страницы, вы можете добавлять новые
определения с помощью функции addRule (object, style). Где object - объект, а
style, соответственно, стилевые установки. Вот пример, в котором после щелчка на
кнопку, происходит изменение стилевой таблицы:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY>
<H1>Это Заголовок 1</H1>
<H2>Это Заголовок 2</H2>
<P>Это абзац. Щелкни на кнопку для изменения его стиля</P>
<BUTTON onclick="newRule()">Нажми меня</BUTTON>
</BODY>
</HTML>
Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля,
путем добавления установки в таблицу стилей.

Глава 4. Динамическое содержание
В этой главе речь пойдет о динамическом содержании документа. Причем содержание
подразуменвает под собой содержимое страницы: объекты, текст и т. п.
До того, как появился Internet Explorer 4.0, содержимое HTML-страницы
устанавливалось один раз при загрузке страницы и для изменения ее содержимого
требовалось вновь перегружать ее через сервер. Dynamic HTML разрешило эту
проблему. Теперь, вы можете создавать новые или удалять старые элементы и их
содержимое до того или уже после того, как страница была загружена. И делать это
можно без ее обновления!
Читайте следующие разделы:
Изменение содержания элемента
Добавление содержания элемента
Пример создания оглавления
Замечания по поводу динамического содержания
Изменение содержания элемента
DHTML предоставляет ряд возможностей и операций, с помощью которых вы можете
манипулировать содержимым элемента, и самим элементом.
Допустим, имеется элемент H1 с неким содержанием и идентификатором:
<H1 ID=MyHeading>Dynamic HTML - это вещь!</H1>
Вы можете изменить содержание этого объекта через свойство innerText вот так:
document.all.MyHeading.innerText="DHTML - это классная штука!"
Подобным образом вы можете воздействовать и на другие элементы, предварительно
присвоив им идентификаторы.
В то время, как свойство innerText действует на содержание элемента, не
затрагивая исходный HTML код, свойство innerHTML способно и на это, посмотрите,
как можно изменить содержание объекта в предыдущем примере, используя это
свойство:
document.all.MyHeading.innerHTML="Dynamic <I>HTML</I> - это вещь!"
В этом случае меняется содержание объекта в HTML форме. Конечно, этот способ
очень гибок и допускает большие возможности.
До сих пор, мы меняли содержимое элемента. Следующие пример показывает, способы
применения функций outerText и outerHTML. С помощью outerText, вы можете удалить
указанный элемент и на его месте поместить обыкновенные текст, являющиеся часть
элемента BODY.
document.all.MyHeading.outerText="DHTML - это классная штука!"
Этот пример очень покож на применение innerText, но только с той разницей, что
объекта с идентификатором MyHeading больше не существует. Применение outerHTML
также очень похоже на innerHTML - она позволяет вставлять в объект другие
объекты, но опять с той лишь разницей, что исходного элемента больше не
существует.
document.all.MyHeading.outerHTML="<SPAN STYLE='color: red'> Rich HTML</SPAN>"
Добавление нового содержания в документ
Вы можете добавлять новое содержание в документ, используя Script-язык. Обычно
это делают по совершении некоего события. Для добавления содержания используюся
функции isertAdjacentText и insertAdjacentHTML. Различия между ними аналогичны
различиям в функциях в предыдущих примерах. Обе эти функции вставляют новое
содержимое в начало или конец документа, причем пользуются при этом параметрами,
которые определяют положение нового содержимого в элементе: BeforeBegin,
AfterBegin, BeforeEnd и AfterEnd. Вот пример, который показывает, как можно
вставить новую строку в элемент BODY при загрузке документа:
<HTML>
<HEAD>
<SCRIPT>
function placeString() {
document.body.insertAdjacentHTML("BeforeEnd","<P>Но с добавлением строки
он стал побольше.");
}
</SCRIPT>
</HEAD>
<BODY onload="placeString();">
<P>Сначала, это был совсем маленький документ.
</BODY>
</HTML>
Первоначально, документ содержит только одну строку в элементе BODY. Когда
происходит загрузка, то-есть элемент BODY инициализируется, но еще не
отображается на экране, выполняется функция placeString, и этот элемент
дополняется еще одной строкой. Таким образом, все действия происходят еще до
того, как вы что-нибудь увидите на экране, а то, что там наклнец появляется -
конечный результат. Однако, вы сами можете понаблюдать, как добавляется новое
содержание, если замените использование события onload на событие onclick.
Тогда, функция placeString будет выполняться после щелчка на документ, то-есть в
видимой стадии (причем каждый новый щелчок будет рисовать новую строку).
Пример: создание программы для построения оглавления
В этой главе показан пример, как создать программу на Script-языке, которая
"просканировав" весь документ, в котором она находится, создаст оглавление из
ссылок на объекты H1, H2, H3 и H4. При этом, для названия главы будут
использован текст этих объектов.
Программа будет состоять из трех функций. Первая из них - buildTOC
последовательно просматривает множество document.all и ещет в нем объекты H1,
H2, H3 и H4. Когда она находит объект заголовка, она устанавливает переменную
уровня и вызывает функции setAnchor и setLink, первая из которых предназначена
для установки имени заголовку, а вторая вставляет ссылку на этот заголовок в
начало документа.
function buildTOC() {
var coll = document.all;
var level;
var id;
for (i=document.body.sourceIndex+1; i<coll.length; i++) {
switch (coll[i].tagName) {
case "H1":
level = 0;
break;
case "H2":
level = 1;
break;
case "H3":
level = 2;
break;
case "H4":
level = 3;
break;
default:
level = -1;
}
if (level!=-1) {
id = i;
setAnchor(coll[i], id);
i++;
setLink(coll[i], level, id);
i+=2;
}
}
}
Заметьте, что переменная i, содержащая индекс элемента для доступа к нему,
изменяется после вызовов функций setAnchor и setLink. Это происходит потому, что
эти функции вставляют новые объекты в документ, что приводит к немедленному
обновлению множества all, и соответственно, индексы объектов изменяются.
Поэтому, так-как функция setAnchor создает один объект, переменная i
увеличивается на 1, функция setLink создает два объекта, соответственно, i
увеличивается на 2.
Функция setAnchor создает элемент <A> и присваивает его свойству NAME= значение,
эквивалентное индексу элемента, которые передан функции. Внутри элемента A
содержится элемент, которому присваивается имя, то-есть какой-то заголовок.
function setAnchor(el, id) {
el.insertAdjacentHTML("BeforeBegin", "<A NAME=\"" + id + "\">");
el.insertAdjacentHTML("AfterEnd", "</A>");
}
Следующая функция - setLink также создает объект <A>, но уже в начале документа.
Теперь, используется его аттрибут HREF= значение которого идентично имени,
только что присвоенному заголовку, то-есть индекс заголовка. Также, чтобы
создать эффект "иерархических уровней" , функция использует объект <BR> для
разбиения строк и некоторое количество символов пробела.
function setLink(el, level, id) {
document.all.MyTOC.insertAdjacentHTML("BeforeEnd", "<BR>");
var s = "&nbsp;";
for (j=0; j<level; j++)
s = s + s;
document.all.MyTOC.insertAdjacentHTML("BeforeEnd",
s + "<A HREF=\"#" + id + "\">" + el.innerText + "</A>");
}

Замечания по поводу изменения содержания документа
Вот некоторые пункты, на которые вы должны обратить внимание, работая с
динамическим содержанием:
Будте осторожны с индексами элементов. Когда вы добавляете новые элементы с
помощью любой из множества функций, коллекция document.all при этом обновляется,
что влияет на свойство элементов sourceIndex, так что если вам надо его
сохранить для следующей работы, будьте осторожны, так как сохраненное не всегда
соответствует действительности.
Вы не можете присвоить строку свойствам innerHTML и outerHTML, содержащую
некорректный HTML код. Так, например, попытка замещения содержимого элемента <P>
другим <P> не сработает. Этот объект может содержать только текст или инлайновые
элементы, например, <BR>. Однако, замещение самого элемента <P> другим <P> будет
работать великолепно.
Могут быть изменены объекты, которые содержатся в элементе <BODY>. Вы можете
изменять содержимое <BODY>, но никак не его самого.
Содержание элемента <TD> может быть изменено (innerText, innerHTML) и элемент
<TABLE> может быть замещен (outerText, outerHTML), но никакие другие табличные
элементы не могут быть изменены с помощью этих свойств.

Глава 5. Фильтры и графические переходы.
Ни для кого не секрет, что самыми лучшими способами представления информации
являются наглядные картинки. Особенно это действенно, когда картинка эффектно
подана. Среда Microsoft Internet Explorer имеет набор встроенных функций,
используя которые, картинку можно вывести на экран не просто так, моментально, а
используя какой-нибудь прибамбас, при котором она будет выведена на экран с
каким-нибудь эффектом, например горизонтальными полосами или случайными шашками;
это называется графическим переходом. Также, можно использовать графический
фильтр, "пропустив" через который исходную картинку на выходе получим эту же
картинку, но с каким-нибудь эффектом, например быстрого движения (это когда все
смазано, как будто смотришь из окна поезда).
В этой главе я коротко познакомлю вас с некоторыми способами применения фильтров
и переходов, так как подробное их изучение занимает отдельную книгу.
Далее в этой главе:
Применение фильтров

Применение фильтров
Визуальные фильтры - это новое расширение IE 4.0, которое позволяет легко и
просто изменять видимое отображение содержания HTML страницы. Фильтр назначается
объекту через аттрибут filter во множестве style. Значение свойства filter -
строка, которая описывает желаемый фильтр, способ написания которой очень похож
на вызов функции. Синтаксис этой строки таков:
filter: filtername(properties)
Здесь, filtername - имя фильтра, а properties - свойства.
Вот пример применения фильтра к объекту <IMG>
<IMG SRC="..//somepicture.gif" STYLE="filter: blur(strenght=50)">
В этом примере применяется фильтр с именем blur, который создает эффект
движения. При этом, у него в параметрах стоит строка strenght=50, которая
обозначает силу эффекта равную пятидесяти. Вы также можете применить
одновременно несколько фильтров. Следующие пример расширяет предыдущий,
заставляя картинку перевернуться кверх ногами:
<IMG SRC="..//somepicture.gif" STYLE="filter: blur(strenght=50) flipv()">
Каждый фильтр имеет набор опциональных аттрибутов, которые указывают способ
применения этого фильтра. Некоторые фильтры, такие как flipv и fliph, отражающие
картинку соответственно по вертикали и по горизонтали, не имеют аттрибутов.
Применение одновременно большего числа фильтров делается способом, как показано
в примере выше.