2.6.2 Управление видимостью
Одним из наиболее интересных атрибутов CSS-P является visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице. Данное свойство может использоваться при динамическом отображении элементов посредством JavaScript-сценариев. В примере 2.11 и на рис. 2.11 показано, как можно скрывать или выводить на экран информацию. При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer.
|
Пример 2.11. Изменение видимости слоя |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Управление видимостью</TITLE> </HEAD> <BODY> <Р id=ht style="Z-INDEX:2; CОLOR:black; TEXT-ALIGN:cеnter; BACKGROUND-COLOR:#d8d8d8; PОSITION:relative; TOP:10px; LEFT:0px; VISIBILITY:hidden;"> Этот текст был невидим. <P style="COLOR:black; TEXT-ALIGN:center"> <А onclick="window.document.all.ht.style.visibility='visible';" href="javascript:void(0);">Проявить текст</A> <A onclick="window.document.all.ht.style.visibility='hidden';" href="javascript:void(0);">Скрыть текст</А> </BODY> </HTML>
|
Абсолютное и относительное позиционирование блоков позволяет придать странице третье измерение. Координаты блока, а точнее, левого верхнего угла прямоугольника блока, и его линейные размеры определяют местоположение блока на плоскости. Поскольку блок не является абстрактной точкой, прямоугольники блоков перекрываются. Причем в определенном порядке, что позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков (слоев, в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой (рис.2.12). Атрибутz-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели описания "слойки". В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значения данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влиет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
В примере 2.12 и на рис. 2.13 показано, как можно посредством JavaScript-сценария изменять порядок наложения слоев.
|
Пример 2.12. Изменение порядка наложения слоев |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Изменение порядка слоев</TITLE> </HEAD> <BODY> <Р id=first style="FONT-SIZE:15px; WIDTH:300px; CОLOR:whitе; BACKGROUND-COLОR:black; РОSITION:relative; TOP:10px; LEFT:10px;"> Первый слой, на который "наедем" другим слоем. </P> <DIV id=second style="PADDING:10px; FONT-SIZE:15px; LEFT:100px; WIDTH:280px; COLOR:black; POSIТION:relative; TOP:-28px; HEIGHT:21px; BACKGROUND-COLOR:#d8d8d8"> Второй слой, который "наезжает" на первый. </DIV> <SCRIРТ> window.document.all.first.style.zIndex=0; window.document.all.second.style.zIndex=1; function overlay() {if(window.document.all.first.style.zIndex<window.document.all.second.style.zIndex) {window.document.all.first.style.zIndex=1; window.document.all.second.style.zIndex=0;} else{window.document.all.first.style.zIndex=0;window.document.all.second.style.zIndex=1;}} </SCRIPT> <DIV style="COLOR:darkred; TEXT-ALIGN:center"> <A onclick="javascript:overlay();return false;" hrеf="http://www.intuit.ru/department/internet/css/5/"> Переложить слои </A> </DIV> </BODY> </HTML>
|
Задание:
Выполнить в контрольной работе те примеры из приведенных выше, которые соответствуют номеру варианта (Табл.2.1). Вариант равен порядковому номеру фамилии студента в журнале группы.
Таблица 2.1 – Варианты заданий
|
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
|
1 |
2.1-2.2, 2.7-2.8, 2.11 |
6 |
2.1-2.2, 2.9-2.10, 2.11 |
11 |
2.1-2.2, 2.7-2.8, 2.12 |
16 |
2.1-2.2, 2.9-2.10, 2.12 |
21 |
2.1-2.2, 2.7-2.8, 2.12 |
|
2 |
2.3, 2.7-2.8, 2.11 |
7 |
2.3, 2.9-2.10, 2.11 |
12 |
2.3, 2.7-2.8, 2.12 |
17 |
2.3, 2.9-2.10, 2.12 |
22 |
2.3, 2.7-2.8, 2.12 |
|
3 |
2.4, 2.7-2.8, 2.11 |
8 |
2.4, 2.9-2.10, 2.11 |
13 |
2.4, 2.7-2.8, 2.12 |
18 |
2.4, 2.9-2.10, 2.12 |
23 |
2.4, 2.7-2.8, 2.12 |
|
4 |
2.5, 2.7-2.8, 2.11 |
9 |
2.5, 2.9-2.10, 2.11 |
14 |
2.5, 3.2, 2.12 |
19 |
2.5, 2.9-2.10, 2.12 |
24 |
2.5, 2.7-2.8, 2.12 |
|
5 |
2.6, 2.7-2.8, 2.11 |
10 |
2.6, 2.9-2.10, 2.11 |
15 |
2.6, 2.7-2.8, 2.12 |
20 |
2.6, 2.9-2.10, 2.12 |
25 |
2.6, 2.7-2.8, 2.12 |
Содержание отчета:
задание;
исходные тексты;
результаты работы.