Автор статьи: Головин Андрей
В этом «опыте» рассмотрим как реализовать позиционирование объектов как для 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>
