Динамичные меню

Демонстрируется способ создания динамически меняющегося линейного меню, которое будет работать и с Microsoft Internet Explorer 4.0, и с Netscape Navigator 4.0. Способ основан на применении новых методов, таких как абсолютное позиционирование, управляющие элементы ActiveX (элемент PATH), стилевые таблицы и слои. Предполагается, что читатель имеет некоторый опыт работы с VBScript или JavaScript.

Компании Microsoft и Netscape избрали разные подходы к реализации возможностей, объединяемых названием "динамический HTML". Подход Microsoft основан на обработке атрибутов иерархических стилевых таблиц (Cascading Style Sheets) стандарта CSS1 с помощью сценариев, а кое-что делается посредством новых встроенных управляющих элементов ActiveX, "облегченных" и безоконных. Netscape опирается главным образом на новый HTML-тег .

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

В этой статье демонстрируется создание динамического меню, рассчитанного на просмотр в IE 4.0. При его создании используются стилевые таблицы CSS1, управляющий элемент ActiveX PATH и динамически меняющиеся элементы HTML. Затем тот же самый эффект получается для Navigator 4.0 с помощью стилевых таблиц CSS1 и тега . Не следует забывать, что, когда писалась эта статья, и IE 4.0, и Navigator 4.0 еще находились в работе, так что пример, возможно, потребуется слегка модифицировать для будущих версий браузеров. Он тестировался с Navigator 4.0b4 и Internet Explorer 4.0 platform release 1 под управлением Windows 95.

Создание стилевых таблиц

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

На рисунке показано меню, текстовая часть которого построена из заголовков второго уровня (

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

:

h2 A { text-decoration: none; color: gold }
h2 A:link { color: gold }
h2 A:visited { color: gold }

Следующим шагом определим стиль для входящих в меню изображений в расчете только на IE 4.0. Для размещения изображений точно в заданном месте страницы применим абсолютное позиционирование. Чтобы сделать изображения невидимыми при первом открытии страницы, воспользуемся признаком видимости:

#menu1 { position: absolute; left: 0; top: 0;
visibility: hidden}

#menu2 { position: absolute; left: 142; top: 0;
visibility: hidden}

#menu3 { position: absolute; left: 284; top: 0;
visibility: hidden}

#menu4 { position: absolute; left: 192; top: 0;
visibility: hidden}

#menu5 { position: absolute; left: 142; top: 192;
visibility: hidden }

#menu6 { position: absolute; left: 284; top: 192;
visibility: hidden}

И наконец, сформируем текст меню, который будет появляться на экране сразу, как только откроется страница, так что, если читатель не пожелает ждать появления изображений (или вообще отключит загрузку графики), он сможет работать с текстовыми ссылками. Необходимо, чтобы каждый пункт текстового меню целиком помещался в отведенную ему область экрана; в противном случае после щелчка по пункту меню Internet Explorer начнет неправильно отображать его текст. В стилевой таблице предусмотрена также выдача сообщения во время загрузки графической части меню. Всякий раз, помещая на страницу нечто не всегда видимое или выводящееся постепенно, информируйте пользователя о том, что происходит, и обеспечьте ему какой-нибудь вид обратной связи:

#title1 { position: absolute; left: 60; top: 60;
          z-index: 2; height: 24px; width: 100% }
#title2 { position: absolute; top: 60; left: 152;
          z-index: 2; height: 24px; width: 100% }
#title3 { position: absolute; top: 60; left: 244;
          z-index: 2; height: 24px; width: 100% }
#title4 { position: absolute; top: 152; left: 60;
          z-index: 2; height: 24px; width: 100% }
#title5 { position: absolute; top: 152; left: 152;
          z-index: 2; height: 24px; width: 100% }
#title6 { position: absolute; top: 152; left: 244;
          z-index: 2; height: 24px; width: 100% }
#imagewait { position: absolute; top: 125; 
             left: 70 }

Вставка изображений в Web-страницу

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

Обратите внимание: изображению, на которое "повешена" ссылка, приписана рамка нулевой толщины (рамка меняет цвет после того, как посетитель страницы пройдет по ссылке; этого проще всего избежать, сделав толщину рамки нулевой. - Прим. ред.). Поскольку Navigator не воспринимает стилевых правил для изображений, существенную информацию о них, такую как ширина, высота и толщина рамки, следует задавать непосредственно атрибутами тега (соответственно width, height и border).

Добавим к меню текстовые объекты - текстовую альтернативу для каждого изображения (этот текст будет виден, пока изображение загружается, а также если оно вовсе не будет загружаться) и сообщение о том, что идет загрузка изображений:

Images for menu bar are loading... please wait




Site 1


Site 2


Site 3


Site 4


Site 5


Site 6

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

Последними добавим шесть ActiveX-элементов PATH, которые будут контролировать анимацию меню для IE 4.0. Элемент PATH позволяет определить путь перемещения экранного объекта как последовательность пар координат. Координаты объекта меняются через определенные промежутки времени в соответствии с заданным путем, и в результате объект движется. Используемые в примере параметры - координаты соответственно по осям X и Y. Можно было бы задать также скорость перемещения, но, поскольку нам понадобится синхронизировать движение изображений, мы сделаем это иначе - с помощью сценария - и чуть позже:

Обратите внимание на то, что наборы координат X и Y у каждого PATH-объекта свои, но продолжительность такта перемещения (это первый параметр) у всех одна и та же. Она задается в микросекундах.

Управляющие ActiveX-элементы PATH - последнее, что мы должны поместить на страницу. Теперь можно переходить к самому интересному - к "оживлению" меню.

Анимационный сценарий

Анимация запускается в момент загрузки страницы путем перехвата события onLoad для документа. Первой вызывается функция с именем cycle, которая есть и в VBScript, и в JavaScript, так что оба браузера ее адекватно воспримут: IE обработает функцию VBScript, а Navigator - функцию JavaScript.

Первый сценарий управляет поведением меню в IE 4.0. Он написан целиком на VBScript, хотя, если корректно учитывать различия между браузерами, можно было бы воспользоваться и JavaScript. Функция cycle присваивает каждому объекту PATH в качестве параметра Target правило стилевой таблицы для одного из изображений, составляющих меню. Таким образом, управляющие объекты оказываются связаны с экранными. Затем изображения визуализуются, а надпись с просьбой подождать делается невидимой.

Теперь вызовем для каждого из PATH-объектов метод play; этим мы инициируем анимацию, однако движение пока отсутствует, поскольку мы еще не связали с управляющими элементами механизм отсчета времени. Отсчет задается с помощью функции setTimeout и второй подпрограммы, которая управляет анимацией изображения. Вот полный текст подпрограммы cycle:

Sub cycle
        pathone.Target = menu1.Style
        pathtwo.Target = menu2.Style
        paththree.Target = menu3.Style
        pathfour.Target = menu4.Style
        pathfive.Target = menu5.Style
        pathsix.Target = menu6.Style

        menu1.style.visibility="visible"
        menu2.style.visibility="visible"
        menu3.style.visibility="visible"
        menu4.style.visibility="visible"
        menu5.style.visibility="visible"
        menu6.style.visibility="visible"

        imagewait.style.visibility="hidden"

        pathone.Play
        pathtwo.Play
        paththree.Play
        pathfour.Play
        pathfive.Play
        pathsix.Play

        Dim itimer
        itimer = setTimeout( "MoveIEObjects()", 50)
End Sub

Для синхронизации изображений я пользуюсь собственным таймером; это соответствует рекомендации Microsoft для случая, когда в пределах одной Web-страницы используется более одного элемента PATH.

Подпрограмма MoveIEObjects вызывает для каждого PATH-объекта метод Tick, который перемещает объект в позицию, заданную следующей парой координат. После этого она проверяет, не достиг ли объект конца траектории (что в нашем случае происходит за восемь тактов), и снова обращается к функции setTimeout, чтобы продолжить анимацию. Заметим, что можно было бы обойтись и без проверки: после того как траектория пройдена, объект останавливается сам. Однако мне требуется остановить также и таймер. Подпрограмма MoveIEObjects имеет следующий вид:

Sub MoveIEObjects
        pathone.Tick
        pathtwo.Tick
        paththree.Tick
        pathfour.Tick
        pathfive.Tick
        pathsix.Tick
        Dim itimer
        If currentTick < 8 Then
                itimer = setTimeout("MoveIEObjects()", 50)
        End If
End Sub

Теперь займемся текстом на JavaScript, который обеспечит движущееся меню при просмотре страницы в Navigator 4.0. Функция cycle для Navigator идентична одноименной функции для IE 4.0 за одним лишь исключением: здесь требуется вручную создать массивы координат X и Y. Эти массивы, в свою очередь, заполняются другими массивами, которые содержат уже реальные координаты. После того как массивы созданы, изображения выводятся на экран и запускается таймер:

var TimingObjectsX
var TimingObjectsY
var currentTick = 0
function cycle() {

                TimingObjectsX = new Array(6);
                TimingObjectsY = new Array(6);

                TimingObjectsX[0] = new Array(0,12,25,37,50,90,120,142);
                TimingObjectsY[0] = new Array(0,12,25,37,50,50,50,50);

                TimingObjectsX[1] = new Array(142,142,142,142,
                                                142,167,200,234);
                TimingObjectsY[1] = new Array(0,12,25,37,50,50,50,50);

                TimingObjectsX[2] = new Array(284,271,259,246,234,
                                                234,234,234);
                TimingObjectsY[2] = new Array(0,12,25,37,50,107,122,142);

                TimingObjectsX[3] = new Array(0,12,25,37,50,50,50,50);
                TimingObjectsY[3] = new Array(192,179,
                                                167,155,142,107,77,50);

                TimingObjectsX[4] = new Array(142,142,142,142,
                                                142,107,77,50);
                TimingObjectsY[4] = new Array(192,179,167,155,142,
                                                142,142,142);

                TimingObjectsX[5] = new Array(284,271,259,246,234,
                                                196,161,142);
                TimingObjectsY[5] = new Array(192,179,167,155,142,
                                                142,142,142);

document.layers["menu1"].visibility="show";
                document.layers["menu2"].visibility="show";
                document.layers["menu3"].visibility="show";
                document.layers["menu4"].visibility="show";
                document.layers["menu5"].visibility="show";
                document.layers["menu6"].visibility="show";
                document.layers["waitimage"].visibility="hidden";
                setTimeout("MoveObjects()", 400);

Последний сценарий реализует функцию MoveObjects для Navigator. Метод moveTo, содержащийся в теге , перемещает изображение в позицию, которая определяется координатами, соответствующими данному событию таймера. Обратите внимание: для продолжительности такта здесь указано большее значение, чем в сценарии для IE 4.0. Дело в том, что при реализации на основе PATH-объектов движение получается более медленным, чем при реализации его с помощью тега , а мне требовалось, чтобы два эффекта были максимально схожими.

function MoveObjects() {
        document.layers["menu1"].moveTo
                (TimingObjectsX[0][currentTick], 
                                        TimingObjectsY[0][currentTick]);
        document.layers["menu2"].moveTo
                (TimingObjectsX[1][currentTick], 
                                        TimingObjectsY[1][currentTick]);
        document.layers["menu3"].moveTo
                (TimingObjectsX[2][currentTick], 
                                        TimingObjectsY[2][currentTick]);
        document.layers["menu4"].moveTo
                (TimingObjectsX[3][currentTick], 
                                        TimingObjectsY[3][currentTick]);
        document.layers["menu5"].moveTo
                (TimingObjectsX[4][currentTick], 
                                        TimingObjectsY[4][currentTick]);
        document.layers["menu6"].moveTo
                (TimingObjectsX[5][currentTick], 
                                        TimingObjectsY[5][currentTick]);
        currentTick++
        if (currentTick < 8) 
                setTimeout("MoveObjects()", 400)
}

Заметьте, что изменение размеров окна Navigator может нарушить выравнивание изображений. Чтобы избежать подобных эффектов, Netscape рекомендует пользоваться пустым JavaScript-оператором document.write, но в нашем случае этот прием не срабатывает. Я продолжу поиски решения и, как только оно появится, помещу его на своей Web-странице. Пока же, изменив размеры окна, вы должны будете заново загрузить пример. С окном IE проблем не возникает.

Итак, сценарий готов. Чтобы проверить пример, нужен либо IE 4.0, либо Netscape 4 (с более ранними версиями браузеров он работать не будет). Проверить пример можно по адресу http://www.netscapeworld.com/netscapeworld/nw-06-1997/animated/aniimgmp.htm. Чтобы просмотреть его полный исходный текст, воспользуйтесь режимом View Source своего браузера.