Основы работы со слоями в CSS - Для програмиста - Программирование - Статьи

Меню

Все что вам нужно есть тут.

Если чего то нет пишите!

Контакты для связи

Если у вас возникли какие-либо вопросы, то вы можете связаться с администратором через:

Skype: qwerboda

ICQ: временно не работает

Вконтакте: Временно нету

E-mail: qwerboda@at.ua

Администрация не занимается обучением пользователей! А занимается поддержкой сервиса и решением проблем касающихся веб-сайта.

Главная » Статьи » Программирование » Для програмиста

Основы работы со слоями в CSS

Для задания имени слоя используется атрибут style="FONT-WEIGHT: bold; ">ID, который уникальным образом определяет элемент в документе и применяется для обращения к нему из скрипта. Документы с повторяющимися значениями style="FONT-WEIGHT: bold; ">ID считаются технически недействительными. Чтобы определить стиль слоя используется style="FONT-WEIGHT: bold; ">ID-селектор, который задается символом решетки (#) в начале имени селектора (в примере - #layer1). Обращение к слою JavaScript использует несколько способов обращения к слою, которые имеют свои особенности в различных браузерах. Internet Explorer Браузер использует обращение к слою тремя способами: с помощью метода семейства style="FONT-WEIGHT: bold; ">item, напрямую по имени элемента и косвенно через массив. Так, для слоя с именем layer1 обращение будет следующим. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.all.item("layer1") document.all.layer1 document.all["layer1"] Ссылаясь с помощью метода style="FONT-WEIGHT: bold; ">item или через массив семейства style="FONT-WEIGHT: bold; ">all, можно запросить слой по имени, передавая его в качестве параметра. Netscape Communicator В данном браузере слои реализуются с помощью тега LAYER, который поддерживается только Netscape. На наше счастье, браузер прекрасно понимает и тег DIV, поэтому код для создания слоя, приведенный в Примере 1, не изменится. По другому будет лишь обращение к слою из JavaScript. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.layers.layer1 document.layers["layer1"] Отличие от браузера Internet Explorer - в семействе style="FONT-WEIGHT: bold; ">layers объекта style="FONT-WEIGHT: bold; ">document, который поддерживается только браузером Netscape версии 4 и выше. Opera Opera предлагает свой путь работы со слоями, через семейство style="FONT-WEIGHT: bold; ">getElementByIdобъекта style="FONT-WEIGHT: bold; ">document. Обращение к слою будет следующим.. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.getElementById("layer1") Это не массив, поэтому указание имени слоя берется в круглые скобки. Определение типа браузера Поскольку разные браузеры предлагают свои собственные способы обращения к слоям, перед тем, как изменять параметры слоя, следует выяснить, в каком браузере открывается документ. В простейшем случае, определение браузера будет следующим. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> <script language="JavaScript"> NC = (document.layers); IE = (document.all); Opera = (document.getElementById); </script> Здесь не определяется версия браузера, что в некоторых случаях может понадобиться. <Изменение параметров слоя Вышеуказанные отличия в реализации разных браузеров при обращении к слоям этим не ограничиваются. При каждом изменении какого-либо параметра слоя, придется определять тип браузера и применять свои настройки. Internet Explorer обращается к свойствам слоя через стили. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.all["Имя слоя"].style.свойство = "параметр" Netscape Communicator напрямую. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.layers["Имя слоя"].свойство = "параметр" А Opera также применяет свойство стилей. style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> document.getElementById("Имя слоя").style.свойство = "параметр" Основные эффекты слоя, которые применяются для различных задач - спрятать/показать слой, изменение координат и положения слоя. Как спрятать слой По умолчанию элемент видим, если отображается его родитель. Например, скрытие элемента BODY прячет все содержимое документа. Эффект видимости можно установить явно, тогда любые наследования учитываться не будут. Для скрытия слоя следует изменить значение свойства style="FONT-WEIGHT: bold; ">visibility путем установки параметра style="FONT-WEIGHT: bold; ">hidden. Пример 2. Прятанье слоя style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> <html> <head> <script language="JavaScript"> function hiddenLayer() { NC = (document.layers); IE = (document.all); Opera = (document.getElementById); style="COLOR: #990099; ">if(IE) eval('document.all["layer1"].style.visibility = "hidden"'); if(NC) eval('document.layers["layer1"].visibility = "hidden"'); if(Opera) eval('document.getElementById("layer1").style.visibility = "hidden"'); } </script> </head> <body onLoad="hiddenLayer()"> <div id="layer1" style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:1">Содержимое слоя</div> </body> </html> Замечание: При скрытии с помощью параметра style="FONT-WEIGHT: bold; ">visibility, слой не удаляется из потока документа. То есть, если спрятать таким образом слой, он станет невидимым, но место, которое он занимает, останется. Если предполагается вывод разных слоев в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование. Как показать невидимый слой Если слой невидим, его можно показать с помощью того же параметра style="FONT-WEIGHT: bold; ">visibility, который принимает значение style="FONT-WEIGHT: bold; ">visible. В примере 3 показывается, как можно динамически делать слой видимым или прятать его. Пример 3. Изменение видимости слоя style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace"> <html> <head> <script language="JavaScript"> function init() { IE = (document.all) NC = (document.layers) Opera = (document.getElementById) } function hiddenLayer() { init(); if(IE) eval('document.all["descr"].style.visibility = "hidden"') if(NC) eval('document.layers["descr"].visibility = "hidden"') if(Opera) eval('document.getElementById("descr").style.visibility = "hidden"') } function showLayer() { init(); style="COLOR: #990099; ">if(IE) eval('document.all["descr"].style.visibility = "visible"') if(NC) eval('document.layers["descr"].visibility = "visible"') if(Opera) eval('document.getElementById("descr").style.visibility = "visible"') } </script> </head> <body> <table width="90%" border="1" cellspacing="0" cellpadding="4" bordercolor="#666666" align="center"> <tr> <td width="20%" align="center"><a href=# onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border=0></a></td> <td> <div id="descr" style="COLOR: #990099; ">style="position: relative; visibility: hidden">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div> </td></tr></table> </body> </html>
1 2 3 4 5 Категория: Для програмиста \| Добавил: qwerboda (2009-03-20)
Просмотров: 605 \| Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Добавть файл на сервер

Архивы с шаблонами, или другими файлами размещайте тут! и указывайте ссылку из етого обменника.

Статистика сайта

Онлайн всего: 1

Гостей: 1

Пользователей: 0