Позиционирование слоя. Библиотека I2R. Для изменения положения слоя на странице с помощью скриптов, используется метод top и left, которые соответственно определяют позицию по вертикали и горизонтали. Начало координат, напоминаю, ведется от левого верхнего угла слоя.

Версия для печати

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

Абсолютное и относительное положение слоя

Положение координат зависит от свойства position, которому обычно присваивают значение absolute (абсолютное) или relative (относительное).

При абсолютном позиционировании слой размещается относительно левого верхнего угла окна документа с помощью параметров left и top (рис. 1). В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя (рис. 2).

Рис. 1. Положение слоя относительно окна браузера

Кроме тегов DIV и SPAN абсолютное позиционирование поддерживают следующие элементы: APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

Параметр position: relative используется для смещения слоя относительно родительского элемента (рис. 2). Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

Рис. 2. Положение слоя относительно родительского элемента

Использование относительного позиционирования приведено в примере 1.

Пример 1. Относительное положение слоя


         <div style="font-family: Times, serif; font-size: 
           200%">

           T<span style="position: 
           relative; top: 10px">E</span>X 
           и L<span style="position: 
           relative; top: -5px; font-size: 80%">A</span>T<span 
           style="position: relative; top: 10px">E</span>X

           </div>

Популярные системы ТЕХ и LATEX имеют свою оригинальную форму написания, подчеркивая тем самым возможности, которые в них заложены. А что нам их возможности, у слоев и стилей тоже возможности ого-го какие, так что даже такая хитрая надпись легко получается с помощью простого кода.

TEX и LATEX

Задание именно относительного положения отдельных букв в тексте гарантирует, что его можно перемещать в любое место документа. Сдвиг буквы Е вниз задается положительным значением параметра top, а поднятие буквы А - отрицательным.

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

Пример 2. Абсолютное положение слоя


<div style="position: 
           absolute; left: -500px; top: 0px; z-index: 1000">

           <table width=100% height=100%>

           <tr><td align=center>

           Опля, рекламка пошла...

           </td></tr>

           </table> 

           </div>

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

Изменение координат слоя

Для изменения положения слоя на странице с помощью скриптов, используется метод top и left, которые соответственно определяют позицию по вертикали и горизонтали. Начало координат, напоминаю, ведется от левого верхнего угла слоя.

Различные браузеры подходят по разному к изменению координат объектов. Так, для слоя с именем knob, положение по вертикали будет определяться следующим способом:

браузеры поддерживающие DOM (Document Object Model), используют метод document.getElementById("knob").style.top;
Internet Explorer - document.all["knob"].style.top;
Netscape 4 работает с тегом LAYER - document.layers["knob"].top.

Ниже, в примере 3, показывается, как изменять положение слоя случайным образом.

Пример 3. Изменение координат слоя


           <html>

             <head>

             <script language="JavaScript">

               NC = (document.layers);

               IE = (document.all);

               DOM = (document.getElementById);

             

             function catchButton() {

               newPosX = Math.round(Math.random()*400 
             - 200);

               newPosY = Math.round(Math.random()*200 
             - 100);
            if (NC) {

               document.layers["knob"].top 
             = newPosY;

               document.layers["knob"].left 
             = newPosX;

             } 
            if (DOM) { 

               document.getElementById("knob").style.top 
             = newPosY;

               document.getElementById("knob").style.left 
             = newPosX;

             } 
            if (IE) { 

               document.all["knob"].style.top 
             = newPosY;

               document.all["knob"].style.left 
             = newPosX;

             } 

             }

             </script>

             </head>
           <body>

             <div id="knob" style="position: 
             relative; z-index: 10">

             <a href=# onMouseOver="catchButton()"><img 
             src="button.gif" border=0></a>

             </div>

             </body>

             </html>

Результат действия примера приведен ниже.

Новые координаты слоя выбираются случайно, в пределах от -200 до +200 по горизонтали и от -100 до +100 по вертикали. Отсчет идет от начально заданного положения слоя, поэтому тип позиционирования position: relative для слоя следует указывать обязательно, без этого программа работать не будет.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...