Internet Exploter 4.0 (IE) и Netscape Communicator 4.0 (NC) по разному интерпретируют HTML 4.0. Поэтому прежде, чем рассматривать принципы создания Динамических HTML, рассмотрим основные отличия этих браузеров и как с ними бороться.

IE представляет слои с помощью CSS и тэга div, в то время как NC советует использовать изобретенный им тэг layer.

Например для IE:

а для NC:

Тэг layer ничем не отличается от CSS, за исключением параметра source, с помощью которого можно указать внешний файл в котором хранится содержимое слоя. Если Вы не собираетесь поддерживать IE, лучше выбрать синтаксис NC. Это позволит строить сложные документы и не повторять во всех файлах стандартные слои, такие как навигационнфя панель или шапка страницы.

На этом проблемы совместимости не заканчиваются, а только начинаются. Классы JavaScript в IE и NC также реализованны по разному. Например, чтобы показать слой в NC надо сказать:

а в IE:

Наш урок носит обзорный характер, поэтому мы не будем подробно рассматривать все различия реализации языка. Посмотрим лучше, как решаются эти проблемы.

Слава Netscape, в JavaScript есть пракрасная функция eval(). Она параметр в строку и интерпретирует ее так, как-будто это строка программы. Чтобы корректно спрятать слой как в IE, так и в NC необходимо написать следующую строку:

Теперь все, что остается, это правильно инициализовать переменные layerRef и styleSwitch с помощью следующего кода:

вызвав его в тэге body:

Теперь давайте для разминки напишем код, который прячет указанный нами слой. Создадим функцию hideLayer с параметром, содержащим имя слоя, несколько изменив приведенный выше eval(...):

По аналогии с ней создается и функция showLayer:

Создадим два слоя. Уже извесное нам сообщение о загрузке (им может быть какая-нибудь новость или цитата)

и невидимый рабочий слой

Теперь в тэге body вызовем функцию прятания слоя loading и показа слоя logo

Для примера рассмотрим движение сверху вниз. Затем по аналогии Вы сможете организовывать перемещение в других направлениях или по более сложным траекториям. Для того, чтобы осуществить перемещение нужно знать четыре значения: текущее положение, место остановки, шаг перемещения, время задержки. Мы ограничимся двумя переменными, а шаг и задержку зададим константами.

Создадим функцию перемещения

В ней сначала проверим, не достиг ли слой конечной точки

если это не произошло, сдвинем слой вниз

и рекурсивно вызовем функцию

Вот, что у нас получилось:

Рассмотрим более сложную операцию - свертывание и развертывание слоя. Будем выполнять ее по горизонтали. По вертикали эта операция выполняется аналогично. Для ее выполнения нам нужно знать ширину слоя. Если мы хотим свернуть слой, никаких предварительных действий предпринимать не надо, но если мы хотим его развернуть, то нужно установить область обреза с левым и правым краями, равными половине ширины слоя. Это можно установить при определении слоя, или в начале программы JavaScript. При этом надо не забыть предварительно спрятать слой для устранения мелькания.

Создадим функцию свертки/развертки:

второй параметр определяет величину прироста/уменьшения ширины, третий - задержку, а четвертый - конечную ширину. Если мы развертываем слой, то конечная ширина должна быть равна ширине слоя, если свертываем, то нулю.

Первым делом изменим левый и правый край области обреза:

Если мы перестарались, то подправим ширину обреза:

Теперь проверим, не достигли ли мы конечного условия:

Если нет, то рекурсивно вызовем функцию:

Вот, что у нас получилось:

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