Автор статьи: Головин Андрей
В этом “опыте” рассмотрим как реализовать позиционирование объектов как для Internet Explorer, так и Netscape Navigtor. Для того, чтобы было лучше понятно, рассмотрим различие в свойствах позиционирования объектов в этих браузерах.
Горизонтальная координата объекта в пикселях:
<b>n</b> document.layers[“obj_name”].left
<b>e</b> document.all[“obj_name”].pixelLeft
Вертикальная координата объекта в пикселях:
<b>n</b> document.layers[“obj_name”].top
<b>e</b> document.all[“obj_name”].pixelTop
Ширина объекта в пикселях:
<b>n</b> document.layers[“obj_name”].clip.width
<b>e</b> document.all[“obj_name”].pixelWidth
Высота объекта в пикселях:
<b>n</b> document.layers[“obj_name”].clip.height
<b>e</b> document.all[“obj_name”].pixelHeight
Средствами JavaScript, с применением уже рассмотренной библиотеки >detect.js, процедуры установки и чтения этих свойств можно реализовать следующим образом:
function getX(el) {
if (NN) {
return(document.layers[el].left);
}
else {
return(document.all[el].style.pixelLeft);
}
}
Я надеюсь, что общая идея ясна? Для желающих разобраться в подробностях, предлагаю скачать последнюю версию библиотеки detect.js, которая, на сегодняшний день, содержит много новых функций, которые кроме определения типа браузера позволяют манипулировать различными свойствами позиционирования объектов и параметрами окна браузера (краткое описание внутри файла).
Необходимо заметить, что эти методы в Netscape Navigator можно использовать только для позиционированных объектов, которые входят в коллекцию layers. Это <DIV> и <LAYER>.
На основе этих методов я переписал библиотеку floaters.js, чтобы ее можно было использовать в обоих браузерах. Для ее использования указываем обе библиотеки в заголовке страницы:
<SCRIPT
TYPE=”text/javascript”
LANGUAGE=”JavaScript”
SRC=”detect.js”>
</SCRIPT>
<SCRIPT
TYPE=”text/javascript”
LANGUAGE=”JavaScript”
SRC=”d-floaters.js”>
</SCRIPT>
В тэге <BODY> задаем обработчик события onLoad, содержащий код следующий код:
function init() {
initDetect();
startFloaters();
}
Создаем процедуру запуска движения startFloaters()
function startFloaters() {
fl1 = new floater(“fl1″,1,2,true);
flStart(fl1);
}
var fl1;
Сам движущийся объект теперь необходимо задавать по-другому. В данном случае – так:
<DIV
ID=”fl1″
NAME=”fl1″
STYLE=”position: absolute; top: 0; left: 0; z-index: 100″>
<IMG
SRC=”images/0032_01.gif”
WIDTH=50 HEIGHT=21
BORDER=0
ALT=”floater”>
</DIV>
