КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Что такое HTTP 21 страница
|
|
|
|
<р>Этот прекрасный загородный дом расположен
в саном сердце старого города. Это придает ему
особую прелесть. </р>
<а href="1730maple.html" onmouseover=
"changelmage(2)" onmouseout="changeBack()">
1730 Кленовая ул.</а></р>
<р>Рядом с этим домом расположены не
только хорошие школы и парк с раскидистыми кленами,
но и прекрасные утоптанные дорожки. </р>
</td>
<td width="200">
<div align="center">
<img src="logo. jpg" id="image01" />
</td>
</tr>
</table>
</body>
</html>
Этот скрипт очень сильно напоминает тот, что представлен в листинге 19.1, особенно сами функции, выполняющие всю работу по смене изображений. Единственное отличие состоит в наборе условных выражений (if), с помощью которых определяется, какие файлы должны быть загружены, в зависимости от гиперссылки. Каждая отдельная ссылка передает собственный индекс, благодаря чему и представляется возможным выстроить последовательность загружаемых изображений. На рисунке 19.2 показан скрипт в действии.
Рис. 19.2. Указатель мыши наведен на ссылку (сверху), и изображение, как видите, поменялось (снизу)
Предварительная загрузка графики
Прежде чем мы продвинемся дальше в изучении DHTML, нужно упомянуть о таком вопросе, как предварительная загрузка изображений. Это вещь нужная и полезная, поскольку, если заставить пользователя при наведении указателя мыши подолгу ждать, пока загрузится очередная картинка, он может уйти с сайта недовольный. При предварительной загрузке файлы изображений сохраняются в кэше браузера. Чтобы понять, как это делается, рассмотрим прием, показанный в листинге 19.3.
Листинг 19.3. Предварительная загрузка изображений для обработки события mouseover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<titml xmlns="http://www.w3.org/1999/xhtml">
<head>
</title>Предварительная загрузка графики</title>
</head>
<script type="text/javascript">
function loadImages () {
image01 = new Image(): image01. src =
"first.jpg"; image02 = new Image(); image02.src =
"second.jpg":
function changelmage () {
document.images.myImage.src=i mage02.src: }
function changeBack () {
document.images.myImage.src=image01.src:
// --> </script>
<body>
<script type="text/javascript">
<!--
loadlmages();
// -->
</script>
<р>Указатель мыши, наведенный на изображение,
изменяет его:</р>
<img src="first.jpg" id="mylmage" onmouseover=
"changelmage()" onmouseout="changeBack()"
</body>
</html>
Главное, что отличает этот скрипт от других, — это новая функция loadlmages() которая вызывается из тела скрипта, загружая тем самым графику в кэш браузера Делается это путем создания нового объекта Image (команда new Image()) и сопо ставления ему определенного файла (атрибут src). Объект Image является встро енным в JavaScript, поэтому отдельно описывать его в программе не нужно. Вновь созданные объекты могут использоваться в функциях changelmage() и changeBack() Интересно, что при их вызове изображения уже оказываются загруженными компьютер пользователя, ему не приходится долго ждать их выкачивания с сервера.
CSSP и слои
Наиболее кросс-платформенной частью всей технологии DHTML является CS Positioning - расширение стандарта CSS, позволяющее очень точно указыва размещение элементов на странице. Благодаря своей совместимости практически со всеми стандартными браузерами, страницы, на которых используется CSSP будут выглядеть примерно одинаково и в IE, и в Netscape 4, и в Netscape 6.
Когда вы решаете сдвинуть элемент (или изменить его позиционирование), вы оказываетесь в несколько иной ситуации. Это связано с тем, что реализация объект ной модели документов в каждом браузере своя, а значит, доступ к элементам CSSP тоже будет отличаться.
Могу сказать, что наиболее запутанной оказывается решение вопроса в Netscape 4, где можно нормально динамически изменять страницы, только если они созданы с использованием <lауег> и <ilауег> — двух элементов, придуманных Netscape. Они позволяют располагать одни части страницы над другими, устанавливать види мость слоев, динамически скрывать и показывать содержимое.
К сожалению, элементы <lауег> тоже не входят в установленные консорциумом W3C стандарты. После того как компания Netscape осознала этот факт, они были убраны. Мы кратко рассмотрим их, но я рекомендую пользоваться для позиционирования элементов специально для этого предназначенным стандартом CSSP. Последний будет работать в любом из трех браузеров.
Основы CSSP
Основная идея технологии CSS Positioning состоит в том, что содержимое и вид веб-страницы может и должен быть разделен. Когда мы изучали таблицы стилей CSS, уже стало понятно, что этот принцип вполне реализуем: со стилями страница выглядит красиво и эффектно, но и без них пользователь может получить доступ ко всей информации.
CSSP продолжает развивать этот принцип. Хотя эта технология позволяет указывать размещение элементов даже точнее, чем это можно было бы сделать с использованием таблиц, она никак не пересекается со стандартной разметкой. В том смысле, что последняя не страдает от отсутствия CSSP. Вы можете создавать страницы, которые будут смотреться совершенно по-разному в CSS-совместимых браузерах, однако их можно спокойно просматривать в текстовых и специализированных браузерах.
К CSSP довольно легко можно привыкнуть, если вы уже знакомы с обычным CSS. Это, в общем-то, почти то же самое. В большинстве случаев вы просто будете создавать новый класс, указывая конкретное расположение элемента. После этого можно либо добавить атрибут cl ass в элемент, либо использовать <span> или <div>, сопоставив один и тот же класс множеству элементов HTML. Для начала неплохо бы узнать о некоторых полезных свойствах CSS, встречающихся при позиционировании. Они показаны в табл. 19.1.
Таблица 19.1. Свойства CSSP
| Свойство | Возможные значения | Пример |
| position | absolute, relative, static | position: absolute |
| left | Числа и ед. измерения | left: 100рх |
| top | Числа и ед. измерения | top:50px |
| width | Числа и ед. измерения | width:250px |
| height | Числа и ед. измерения | height:5in |
| clip | rect (вершина, правый угол, низ, левый угол) | clip: rect(100px, 50px, 50px, 100рх) |
Что дают эти свойства? Прежде всего индивидуальный подход к каждому элементу или их группе. Их можно заключить в воображаемый прямоугольник, определив его размер и расположение на странице. При этом расположение можно задать либо относительное (по отношению к тому месту, где прямоугольник появился бы в отсутствие этого стиля), либо абсолютное (когда расположение отсчитывается от левого верхнего угла страницы).
ПРИМЕЧАНИЕ
Если вы укажете position: static, то элемент будет вести себя так, будто нет над ним никакого CSSP.
Если какое-то из этих свойств и может вызвать недоумение, так это свойство clip, использующееся для того, чтобы сделать видимой только какую-то часть страницы. Оно напоминает прием из графических редакторов под названием «обрезание изображения» (рис. 19.3). Не очень понятно пока что, зачем это нужно, но пример кода я приведу:
.story_text {
position: absolute:
left: 25px;
top:80px:
width: 210px:
Clip: rect(10px', 200px. 500px. 10рх):
}
СОВЕТ
Если вы будете набирать и тестировать листинг 19.4, попробуйте вставить где-нибудь такое определение класса и посмотреть, что получится.
Рис. 19.3. Обрезанный по краям текст выглядит так, будто он был обработан в графическом редакторе
Чтобы увидеть, как все это складывается и составляет единый стиль, рассмотрим такой пример.
Листинг 19.4. Позиционирование заголовка и текста с помощью CSSP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/
DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<titlе>Небольшой пример CSSP</title>
</head>
<style type="text/css">
.headlinel {
position: absolute; left: 25px: top:
20px; width: 200px: height: 50px:
.story_text {
position: absolute: left: 25ox:
CSSP и слои
top: 80px: width: 210px;
</style>
<body>
<h1 class="headlinel">Пенье без музыки</h1>
<div class="story_text">
<р>Когда ты вспомнишь обо мне в краю
чужом -- хоть эта фраза всего лишь вымысел,
а не пророчество, о чем для глаза, вооруженного
слезой, не может быть и речи: даты из омута такой
лесой не вытащишь.</р>
<pxstrong>H. Бродский. 1970</strong</p>
</body>
</html>
Рис. 19.4. Вот каким стройным получилось оформление, благодаря CSSP
Как видно на рис. 19.4, CSSP дает уникальную возможность управления располo жением элементов на странице. Единицы измерения, используемые в листинге, -это пикселы; пожалуй, наиболее универсальный способ обозначать расстояния в ок не браузера. Обратите внимание, что вид шрифтов может очень сильно повлиять на то, как в итоге будет выглядеть вся страница. Возможно, вы захотите объеди нить два подхода: CSSP и обычный.
Перекрытие элементов. Z-индекс
CSSP дает возможность не просто очень точно располагать элементы и их группы на странице, но и уточнять многие их свойства. Среди них, например, свойство перекрытия. Например, если изменить листинг 19.4 таким образом, чтобы текст стиль и расположение которого определены с помощью класса story_text, начи нался чуть выше, то он просто належится на заголовок:
story_text {
position: absolute:
left: 25px:
top: 25px;
width: 210px:
}
На рисунке 19.5 показано, как это выглядит.
Рис. 19.5. Использование CSSP для создания перекрывающихся элементов
Не совсем понятно, когда такое может пригодиться, кроме как при создании своеобразных коллажей. Однако существует несколько случаев, когда перекрытие элементов оправданно. Например, можно создать надпись непосредственно на рисунке. В качестве примера рассмотрим листинг 19.5.
Листинг 19.5. Перекрытие элементов с помощью CSSP
<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD
/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<titlе>Наложение текста на изображение</titlе>
</head>
<style type="text/css">
.image
position: absolute: left: 25px: top:
20px: width: ЗООрх: height: 225px: z-index: 0:
.cutline
position: absolute: left: 125px: top:
200px: width: 210px: z-index: 1: font-face:
courier: font-weight: bold: color: white:
</style>
<body>
<img src="house.jpg" class="image" />
<p class="cutline">12:04: Домик моей любимой бабушки</р>
</body>
</html>
В этом примере (рис. 19.6) текст накладывается на изображение и выглядит как его часть (во всяком случае понятно, что он там оказался не случайно).
Хотите указать, какой элемент будет «сверху», а какой — снизу? По умолчанию: позже определен элемент, тем «выше» он оказывается в этом бутерброде, Однако существует и специальное свойство z-index, с помощью которого можно изменить этот порядок. Чем больше его значение, тем ближе к верхнему слою ходится элемент. (Однако имейте в виду, что z - i ndex распознается в Netscape 6 и IE, но не в Netscape 4, где вообще для таких вещей используются элементы <lауег>.)
Легким движением руки текст, наложенный на рисунок, из предыдущего примера ревращается в рисунок, наложенный на текст. Конечно, мы поменяем цвет и раз мер этого текста, но все равно непонятно, для чего предназначен этот новый вариант примера.
Рис. 19.6. Текст, наложенный на изображение
Рис. 19.7. Изменение атрибута z-index привело к изменению порядка слоев
<style type="text/css">
.image {
position: absolute: left: 25px: top: 20px: width: ЗООрх;
CSSP и слои 349
height: 225px; Z-index: 1;
.outline {
position: absolute; left: 125px: top: 200px; width:
210px: z-index: 0:
font-face: courier; font-weight: bold; font-size:
36pt: color: black:
}
</style>
А всего лишь поменяли местами значения параметра z-index
На рисунке 19.7 показано, как это смотрится в браузере.
Вложенное позиционирование элементов
До сих пор мы имели дело с элементами и группами элементов, являющимися совершенно независимыми друг от друга. Одно начиналось только после окончания другого. Но что произойдет, если вложить свойства позиционирования друг в друга? При использовании абсолютного позиционирования (position; absolute) расположение каждого последующего элемента рассчитывается относительно «родительского». В наших последних примерах таким родительским элементом являлся <body>.
Если же вложить один элемент в другой, то они вступают в отношения наследования. Это означает прежде всего сдвиг координатной сетки «младшего» объекта. Точкой отсчета (верхний левый угол) становится «родитель».
Посмотрим, что будет с листингом 19.4, если мы изменим его и вложим один из элементов в другой. Результат показан в листинге 19.6. (Из соображений экономии ме ста, я вырезал текст стихотворения, который был приведен целиком в листинге 19.4.)
Листинг 19.6. Вложенные элементы CSSP
<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/
xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>npHMep вложения элементов
CSSP</title>
</head>
<style type="text/css">
.headlinel {
position: absolute: left: 25px; top:
20px; width: 200px: height: 50px;
)
.story_text {
position: absolute: left: 25px: top: 80px: width: 210px:
</style>
<body>
<div class="headlinel"> <h1>Пенье без музыки</h1>
<div class="story_text"> <p><strong>
TeKCT Текст Текст</р>
</div>
</body>
</html>
Классы были заключены вдва контейнера <di v>, первый из которых содержит вто рой. Результирующая страница (рис. 19.8) немного отличается от своего предыдущего варианта.
Рис. 19.8. Поскольку второй элемент <div> вложен в первый, то его координатная сетка
сдвинулась налево и вниз
Относительное позиционирование
Итак, мы уже достаточно поговорили об абсолютном позиционировании элементов, перейдем теперь к рассмотрению относительного.
Относительное позиционирование (position: relative) означает, что данная груп-па элементов по каким-то причинам должна отсчитывать свою координатную сет ку от того места, где она бы располагалась в отсутствие указанного стиля. То есть относительность в общем случае имеется в виду по отношению ко всему остально му документу. При этом обычно имеется необходимость указать еще какие-ни-будь параметры группы, например ширину прямоугольника или z-index.
Например, взяв за основу листинг 19.6 и поменяв в нем вторую строку определения класса:
.story_text {
position: relative: top: 5px; }
мы изменим абсолютное позиционирование на относительное.
Поскольку в данном случае story_text является порожденным классом по отношению к headlinel (то, о чем только что говорилось в предыдущем параграфе), то текст будет по-прежнему соотносить свои координаты с заголовком, то есть в итоге ничего не изменится. Так что определение могло быть и проще: можно было лишь указать, что story_text должен быть сдвинут вниз на 5 пикселов относительно того, где он должен был бы быть.
ПРИМЕЧАНИЕ
Может быть, вы не сразу привыкнете к разнице между абсолютным и относительным позиционированием, поэтому я советую немного поэкспериментировать с приведенными примерами, всякий раз проверяя в браузере, что дало изменение того или иного параметра. Кстати говоря, по своему опыту знаю, что представление об относительном позиционировании отличается даже у браузеров уровня 6.0.
Динамическое позиционирование и слои
Дo сих пор мы обсуждали, как с помощью CSSP создавать группы элементов, ко
торые могут накладываться друг на друга. Вы узнали, как атрцбут г - i ndex позволя
ет изменять порядок следования слоев, а также о том, как задавать размещение
элементов на странице с точностью до пиксела. В этом разделе мы применим все
эти знания и будем учиться создавать слои DHTML.
Хочется отметить, что понятие слоя является более концептуальным, чем вам, может быть, показалось, и включает в себя не только наборы параметров. Тем не ме нее все довольно просто.
В предыдущем параграфе вы видели примеры абсолютного позиционирования лементов. В CSSP слои действительно именно этим и ограничиваются. Но вооб ще-то, данный термин используется тогда, когда вы создаете слой при помощи эле мента <div> и при этом пишете скрипт для динамического позиционирования.
Существует особый случай, когда слой становится более значимым словом. Я имею в виду Netscape 4.x и его горячую любовь к элементу <lауег> (название которого дослов-з переводится как «слой»). Я оговорюсь, что Netscape 6 тоже имеет поддержку <lауег>, но сделано это лишь из соображений совместимости версий. Использовать этот эле мент крайней не рекомендуется. Поскольку этот элемент во всех смыслах устарел.
Мы рассмотрим его вкратце, поскольку нужно знать о его существовании: вдруг придется столкнуться с ним при редактировании какого-нибудь пожилого сайта.
Слои CSSP
При создании слоев на основе технологии CSSP вы обнаружите, что процесс очень похож на то, что было продемонстрировано ранее в этом параграфе. Итак, мы создаем слой. Для этого понадобится селектор идентификаторов (#) в определениях стилей (<style>), а не классов, потому что у каждого слоя должен быть собственный id.
Все это вместе выглядит следующим образом:
<div id="имя_слоя">
В листинге 19.7 следует обратить внимание на два слоя, определенных с помощью
селектора id и элемента <div>.
Листинг 19.7. Создание слоев CSSP
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Слои CSSP</title>*
<style type="text/css"> #mydivl {
position: absolute: top: 50px; left: 50px:
height: ЗООрх; width: SOOpx: }
#mydiv2 {
position: absolute; top: 350px; left: 50px;
height: ЗООрх: width: 5OOpx;
}
</style>
</head>
<body>
<!-- Начинается первый слой -->
<div id="mydivl">
<img src="1980main.jpg" />
<р>Этот прекрасный загородный дом расположен
в самом сердце старого города. Это придает ему
особую прелесть.</р>
<!-- Кончился первый слой -->
<!-- Начинается второй слой --
<div id="mydiv2">
<img src="1730maple.jpg" />
<p>Рядом с этим домом расположены не
только хорошие школы и парк с раскидистыми кленами,
но и прекрасные утоптанные дорожки
<!-- Кончился второй слой -->
</body>
</html>
В результате получаются два четко определенных элемента <div>, которые могут использоваться
для изменения позиционирования и даже видимости элементов. Как именно это делается, вы увидите в следующих параграфах. В качестве маленького примера могу привести такой листинг. Все, что нужно
сделать по сравнению с предыдущим кодом, — это поменять местами селекторы id в определениях style:
<style type="text/css">
#mydiv2 {
position: absolute: top: 50px:
left 50px; height: З00рх: wifth: 500px:
)
#mydivl {
position: absolute: top: 350px: left: 50px: height:
ЗООрх: wifth: SOOpx:
)
</style>
Если вы проделаете это и откроете страницу в браузере, то увидите, что слои поме нялись местами. Теперь содержимое второго контейнера <div> оказалось сверху, а первого — снизу. *
Динамическое позиционирование
Теперь вы уже знаете, как размещать элементы на странице. Следующий шаг будет состоять в добавлении JavaScript, благодаря чему появится настоящая динамичность. (В противном случае такую страницу тяжело называть написанной с применением DHTML.) Вот хотя бы такой простой пример. Вы берете какой-нибудь объект, опре деляете его размещение на странице, пишете небольшой скрипт, который будет изменять динамически это размещение. Объект получится как бы анимированным.
Что ж, давайте попробуем. Проиллюстрирую свои слова листингом 19.8. (Между прочим, такой скрипт будет работать только в Internet Explorer версий 4 и 5.)
Листинг 19.8. Перемещение объекта по странице
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML l.O
Transitional//EN" •tp://www. w3.org/TR/xhtmll/
DTD/xhtmll -transitional.dtd">
html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<titlе>Динамическое перемещение элементов</titlе>
<style>
#headblock {
position: absolute:
left: 25px:
top: lOOpx:
width: 200px: }
</style>
</head>
<script type="text/javascript">
{ x = x + "px": У = У + "px"; headblock. style. left
=
x: headblock. style. top = y;
</script>
<body>
<form>
<pre>
Введите координату x: <input type="text"
id="xcoord" /> '
Введите координату у: <input type="text"
id="ycoord" />
<input type="button" уа!ие="Поехали!"
onclick="moveHeading(xcoord.value, ycoord.value)" />
</pre>
</form>
<div id="headblock">
<h1>Пеньe без My3ыки</h1>
<p> Когда ты вспомнишь обо мне в краю
чужом -- хоть эта фраза всего лишь вымысел,
а не пророчество, о чем для глаза, вооруженного
слезой, не может быть и речи: </р>
</body>
</html>
Надо ли объяснять, что пользователь вводит значения координат — и текст стихотворения перемещается на новое место? Довольно интересно, но еще интереснее было бы сделать, чтобы текст время от времени сам куда-нибудь убегал. Что касается того, как выглядит созданная нами страница, это можно увидеть на рис. 19.9.
Но почему же это не будет работать в Netscape? В основном потому, что там ио| пользуется несколько иная система доступа к элементам DOM. Чтобы можно было просмотреть созданную страницу в Netscape 6 (и IE 5.5 и выше), необходимо внести в листинг следующие изменения:
function moveHeading(x, y)
{
headblock = document. getElementByldC'headblock");
x = x + "px": у = у + "px":
headblock.style.left = х: headblock.style.top = у:
Рис. 19.9. Вводим значения, нажимаем кнопку «Поехали!», и целый слой переезжает
на новое место
Все дело в том, что Netscape 6 использует официально рекомендованный консорциумом W3C подход к адресации объектов DOM. А браузеры 4-го поколения от Microsoft автоматически помещают все поименованные элементы в объект document. Смешанный подход заключается в том, чтобы вначале определять, ка кой браузер установлен у пользователя, а затем соответствующим образом задавать объектную переменную (headt>lock=). Мы обсудим это подробнее чуть позже.
ПРИМЕЧАНИЕ
То, что подходы у Netscape 6 и IE4 разные, не означает, что первый — «неправильный». Он как раз по сути своей ближе к рекомендациям W3C. Да и IE 5.5, на самом-то деле, имеет поддержку метода getElementBy!d(). Просто если вы хотите, чтобы и пользователи IE4 могли увидеть вашу блестящую технику написания сайтов, то придется воспользоваться соответствующими методами.
Видимость элементов CSSP
Стандарт CSSP привнес в определения стилей еще один новый параметр: visi bi1ity. Ero возможные значения таковы: visible, hidden, значением по умолчанию являст-ся auto. Вы просто указываете с помощью этого атрибута, хотите ли вы видеть дан ный элемент на своей странице или нет. А если да, то когда: всегда или только когда он не скрыт верхним слоем «бутерброда» из других элементов.
#mydivl {
position: absolute;
left: 25px; top:
lOOpx; height: ЗООрх;
width: 200px:
visibility: hidden
}
Ну и не увидите вы никогда элементы, заключенные в соответствующий <di v>. Если таким способом изменить листинг 19.7, то в результате вы получите то, что показано на рис. 19.10. Как видите, ушел в небытие, скрылся в невидимых мирах первый абзац, определенный в листинге при помощи идентификатора mydivl.
Рис. 19.10. Первый <div> спрятался. На странице видна лакуна
Вообще-то, возможность спрятать какие-нибудь элементы от пользователя не выглядит такой уж привлекательной. Однако само по себе свойство visibility может дать много интересных эффектов, особенно если его использовать вместе с JavaScript
С их помощью можно создать страницу с меняющимися картинками (аналогично тому, что было представлено в листинге 19.2). Только теперь мы понимаем, что местами могут меняться не только изображения, но и целые слои, состоящие из самых разных элементов. Вы уже умеете это делать. По стандартной схеме: определяем группу элементов, даем ей id, устанавливаем свойство visibility. В лис тинге 19.9 обратите внимание на то, что блоки имеют абсолютное позициопирова ние, причем накладываются друг на друга очень точно.
ПРИМЕЧАНИЕ
И снова приходится упоминать о том, что этот пример — только для тех, кто до сих пор пользуется IE 4.0 (и выше — но только до 5.5).
Листинг 19.9. Использование свойства visibility для создания сменного содержимого страниц
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional//EN" I -http://www. w3.org/TR/xhtmll/
DTD/xhtmll-transitional.dtd"> <html xmlns=
"http://www. w3.org/1999/xhtml ">
<head>
<titlе>Переменная видимость</titlе>
</head>
<style type="text/css">
#mydivl {
position: absolute: left: 50px: top: 50px; width:
SOOpx; height: 400px; visibility: visible:
#mydiv2
position: absolute: top: 50px; left: 50px: height:
400px: width: 500px: visibility: hidden:
</style>
<script>
<!--
function changeVist) {
if (mydivl. style. visibility!= "hidden") { mydivl. style.
visibility = "hidden": mydiv2. style. visibility = "visible":
else
mydivl. style. visibility = "visible": mydiv2.
style. visibility = "hidden":
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 387; Нарушение авторских прав?; Мы поможем в написании вашей работы!