GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Динамическое изменение цвета фона ячеек(28462)
Основы работы со слоями(16440)
Единицы измерения CSS(13334)
Шрифты и CSS(10979)
Использование CSS для блочных элементов(10221)
Не знаешь как купить охотничий нож? Заходи к нам, мы поможем.
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » CSS/DHTML » Основы работы со слоями

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


Влад Мержевич
vlad@htmlbook.ru
http://www.htmlbook.ru/

Для задания имени слоя используется атрибут ID, который уникальным образом определяет элемент в документе и применяется для обращения к нему из скрипта. Документы с повторяющимися значениями ID считаются технически недействительными.

Чтобы определить стиль слоя используется ID-селектор, который задается символом решетки (#) в начале имени селектора (в примере - #layer1).

Обращение к слою
JavaScript использует несколько способов обращения к слою, которые имеют свои особенности в различных браузерах.

Internet Explorer
Браузер использует обращение к слою тремя способами: с помощью метода семейства item, напрямую по имени элемента и косвенно через массив. Так, для слоя с именем layer1 обращение будет следующим.

document.all.item("layer1")
document.all.layer1
document.all["layer1"]

Ссылаясь с помощью метода item или через массив семейства all, можно запросить слой по имени, передавая его в качестве параметра.

Netscape Communicator
В данном браузере слои реализуются с помощью тега LAYER, который поддерживается только Netscape. На наше счастье, браузер прекрасно понимает и тег DIV, поэтому код для создания слоя, приведенный в Примере 1, не изменится. По другому будет лишь обращение к слою из JavaScript.

document.layers.layer1
document.layers["layer1"]

Отличие от браузера Internet Explorer - в семействе layers объекта document, который поддерживается только браузером Netscape версии 4 и выше.

Opera
Opera предлагает свой путь работы со слоями, через семейство getElementByIdобъекта document. Обращение к слою будет следующим..

document.getElementById("layer1")

Это не массив, поэтому указание имени слоя берется в круглые скобки.

Определение типа браузера
Поскольку разные браузеры предлагают свои собственные способы обращения к слоям, перед тем, как изменять параметры слоя, следует выяснить, в каком браузере открывается документ. В простейшем случае, определение браузера будет следующим.

<script language="JavaScript">
 NC = (document.layers);
 IE = (document.all);
 Opera = (document.getElementById);
</script>

Здесь не определяется версия браузера, что в некоторых случаях может понадобиться.

<Изменение параметров слоя

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

Internet Explorer обращается к свойствам слоя через стили.

document.all["Имя слоя"].style.свойство = "параметр"

Netscape Communicator напрямую.

document.layers["Имя слоя"].свойство = "параметр"

А Opera также применяет свойство стилей.

document.getElementById("Имя слоя").style.свойство = "параметр"

Основные эффекты слоя, которые применяются для различных задач - спрятать/показать слой, изменение координат и положения слоя.

Как спрятать слой
По умолчанию элемент видим, если отображается его родитель. Например, скрытие элемента BODY прячет все содержимое документа. Эффект видимости можно установить явно, тогда любые наследования учитываться не будут. Для скрытия слоя следует изменить значение свойства visibility путем установки параметра hidden.

Пример 2. Прятанье слоя

<html>
<head>
<script language="JavaScript">
function hiddenLayer() {
 NC = (document.layers);
 IE = (document.all);
 Opera = (document.getElementById);

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>

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

Как показать невидимый слой
Если слой невидим, его можно показать с помощью того же параметра visibility, который принимает значение visible. В примере 3 показывается, как можно динамически делать слой видимым или прятать его.

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

<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();
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="position: relative; visibility: hidden">Данная
эксклюзия является подмножеством астрациональных супремативных
монотенных федоний кадонарного экстрафазория.</div>
</td></tr></table>
</body>
</html>

Результат, демонстрирующий изменение видимости слоя показан ниже. При наведении курсора мыши на кнопку появляется ее описание, которое скрывается, когда курсор с кнопки убирается.

 
03.02.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.