Как заставить DHTML работать и в IE, и в Navigator

Уильям Роберт Стэнек (William Robert Stanek), PC Magazine

Элементы-контейнеры

DHTML опирается на сочетание трех технологий: HTML, каскадные таблицы стилей (Cascading Style Sheets, CSS) и сценарии. HTML служит для определения таких элементов веб-страниц, как текст и таблицы. CSS применяется для задания стиля и позиционирования элементов. А при помощи сценариев осуществляется взаимодействие с элементами и их модификация.

В идеальном мире все эти технологии следовало бы применять для манипулирования любыми элементами веб-страниц. Но из-за различных способов интерпретации DHTML браузерами IE и Navigator для каждого элемента приходится создавать контейнер и манипулировать не самим элементом, а этим контейнером. В качестве такого контейнера мы рекомендуем использовать элемент <DIV>.

Почему <DIV>, который обычно используется в таблицах стилей для разделения областей с разными стилями? Из <DIV> получается единый контейнер, которым можно манипулировать как в Internet Explorer, так и в Navigator. Вместо того, чтобы работать с отдельными элементами: абзацами, таблицами и т. п., — вы создаете контейнеры <DIV>, добавляете к ним элементы, а затем манипулируете этими контейнерами целиком. Чтобы обращаться к контейнерам в кросс-браузерной среде DHTML, им необходимо присвоить имена. Поэтому снабдите контейнер <DIV> атрибутом ID, например: <DIV id="mycontainer">.

Кроме того, нужно определить положение каждого из контейнеров, которыми вы собираетесь манипулировать в DHTML. Это делается одним из двух способов: методом абсолютного или относительного позиционирования. Абсолютное позиционирование определяет точное положение контейнера. Например, можно указать, что контейнер будет находиться в 25 пикселях вправо от левой границы главного окна и в 50 пикселях вниз от его верхней границы. При относительном позиционировании контейнер позиционируется относительно места его определения на веб-странице. Например, он может следовать за третьим элементом страницы и иметь протяженность 200 пикселей.

Положением контейнера по горизонтали (его координатой х) управляет CSS-атрибут left, а его положением по вертикали (координатой y) — атрибут top. Кроме позиционирования элементов на плоскости, можно использовать ось z (элементы могут накладываться один на другой как на трехмерном изображении). Присваивая контейнеру более высокий z-индекс, вы помещаете его перед другим элементом.

Z-индекс обычных элементов страницы равен нулю. Значения z-индекса в IE могут быть положительными и отрицательными целыми числами. Но в Navigator z-индекс должен быть нулем или положительным целым числом. Поэтому для универсальных страниц необходимо использовать только положительные или нулевой z-индексы.

На рис. 1 показано, как указать значения координат x, y, z для двух контейнеров. Первый расположен на 50 пикселей правее левой границы главного окна и на 100 пикселей ниже его верхней границы в абсолютных координатах. Второй контейнер находится на 50 пикселей правее левой границы главного окна в относительных координатах. Z-индексы обоих контейнеров равны 2, так что они расположены перед обычными элементами страницы. Так как первый контейнер позиционирован в абсолютных координатах, на рис. 2 он расположен перед изображением, тогда как контейнер, позиционированный в относительных координатах, находится за изображением.

<html>
<head>
<style type="text/css">
<!--
#abs {  position: absolute; 
        top: 100px; left: 50px; 
        z-index: 2; 
        height: 50px; width: 150px}
#rel {  position: relative; left: 50px; 
        z-index: 2; height: 50px; 
        width: 150px }
-->
</style>
</head>
<body>>
<img src="mugshot.jpg">
<div id="abs">
<p>Absolute positioning example!</p>
</div>
<div id="rel">
<p>Relative positioning example!</p>
</div>
</body>
</html>

Рис. 1. Эта страница иллюстрирует относительный и абсолютный методы позиционирования контейнеров.

рис. 1

Рис. 2. К такому расположению элементов приводит код, представленный на рис. 1. Контейнер, позиционируемый в абсолютных координатах, заслоняет изображение, а тот, что позиционирован в относительных координатах, расположен сзади.

Назад | Вперед

Copyright © 1997, 1998, 1999. ZDNet и Algorithm Media. Все права защищены. Воспроизведение материалов или их частей в любом виде и форме без письменного согласия запрещено. ZDNet и логотип ZDNet являются торговыми марками Ziff-Davis Inc.