КАТЕГОРИИ:
Архитектура-(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 20 страница
|
|
|
|
Наконец, navigator.appVersion выдаст номер версии браузера.Итак, первое, что вы может сделать, — это создать документ, в котором будут отражены все свойства браузера, получившего доступ к нему:
<script type="text/javascript">
document.writeln ("navigator.appName; " + navigator.appName
+ "<br \/>"): document.writeln ("navigator.userAgent:
" + navigator.userAgent + "<br \/>"):
document.writeln ("navigator.appVersion: " + navigator.appVersion
+ "<br \/>");
</script>
Хотя эта информация является бесспорно полезной, пока непонятно, как из этого извлечь какую-нибудь пользу.
А польза может быть такой: узнать версию брау-зера и в соответствии с ней загрузить ту или иную страницу. Но для этого скрипт должен проанализировать текстовые данные и понять, что из этого набора символов является именем приложения, что — версией, и т. д.
Это может быть сделано при помощи серии условных операторов if, как показано в следующем листинге.
Листинг 18.5. Переадресация браузера
<!DOCTYPE html PUBLIC "\//W3C//DTO XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/OTD/xhtnill-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Детектор браузеров </title>
<script>
<!-- Прячем код
var browserAppName = navigator.appName:
if (browserAppName == "Netscape") {
window.location = "net_index.html";
}
else
{
if (browserAppName == "Microsoft Internet Explorer")
{ window.location = "ie index.html";
else {
window.location = "index.html";
</script> </head> <body>
<h1>3дравствуйте. я ваша тетя-детектор браузеров!</h1>
<р>Если эта страница не обновляется, ваш
браузер несовместим с JavaScript или поддержка
JavaScript отключена. Пожалуйста, нажмите
<а href="index.html">3flecb</a>. чтобы хоть
что-нибудь увидеть.</р> </body>
</html>
Наверное, вы уже заметили некоторые архитектурные излишества этого листинга: если надо было определить всего лишь, совместим ли браузер с JavaScript или нет, к чему же столько трудов?
|
|
|
Хватило бы и такой команды: window, location = "newpage.html" Если страница не обновляется, то можно предположить, что JavaScript и браузер пользователя незнакомы.
И тогда можно отправить пользователя по ссылке на ка кую-нибудь часть сайта, на которой отсутствуют скрипты.
ПРИМЕЧАНИЕ
Иногда требуется узнать несколько больше, чем название фирмы-производителя браузера. В таком случае попробуйте посмотреть, что выдаст свойство.appVersion. В главе 19 вы найдете более подробное описание того, что можно делать при определении браузера.
Как написать меню ссылок на JavaScript
Говоря об элементах формы в этой главе, мы опустили элемент <select>.
Сейчас мы восстановим справедливость и
создадим навигационное меню,
позволяющее пользователям быстро переходить с одной страницы на другую.
И для этого мы воспользуемся элементом <select>. Листинг 18.6 показывает это в действии.
Листинг 18.6. Меню <select> и JavaScript
<!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>
<title> Смена страницы </title>
(«script type="text/javascript">
<!--
function changePage(theSelect)
{
var x = theSelect.selectedlndex;
window, location. href =
theSelect.options[x].text:
</script>
</head>
<body>
<div align="center">
<form name="changeForm">
<select name="changeSelect" onchange=
"changePage(this)">
<option selected="se!ect">
Выберите страницу</орtion>
<option>index. html </option>
<option>products. html </opti on>
<option>service. html </option>
<option>about. html </opt i on>
<option>help. html
</opt ion>
</select>
</p>
</form>
</div>
<hr />
пожаловать на сайт!</111>
<р>Какой-то текст...</р>
</body>
</html>
С меню <select>, в отличие от других элементов форм, не ассоциировано никакое значение. Вместо этого используется то, что содержится в контейнерах <option>.
Этот текст сохраняется в свойстве text объекта. Кроме того, выбранное значение сохраняется в свойстве selected Index.
|
|
|
С помощью следующего кода скрипт просто передает значение в selectedlndex. Затем оно используется для получения доступа к тексту выбранного пользователем пункта (для этого существует массив option):
function changePage(theSelect) {
var x = theSelect.selectedlndex:
window.location.href = theSelect.options[x].text:
}
Таким образом и следует извлекать значения из меню <select>.
На рисунке 18.5 показана такая страница в действии.
Рис. 18.5. Навигация с помощью меню <select> и JavaScript
Необходимо копировать этот скрипт, размещая его на всех страницах сайта, если вы хотите добиться однообразия и единого стилевого решения навигационного меню.
Однако есть и другой подход — использовать фреймы. Именно об этом мы и поговорим далее.
JavaScript и фреймы
Предположим, что имеется браузер, поддерживающий JavaScript. Предлагаю попробовать сделать сайт, основанный на фреймах, с выпадающими меню навигации. Направленность нашего будущего сайта будет такова: веб-архив статей с удобным доступом через меню.
Как это всегда бывает при использовании фреймов, нам понадобится целый набор документов, чтобы заставить этот интерфейс работать.
Во-первых, документ, содержащий <frameset>. Это та цементирующая основа, которая скрепляет вместе все разрозненные страницы. Во-вторых, страница навигации, включающая в себя меню <select> (подробности в предыдущем параграфе). Всего несколько изменений -и это меню можно применить к фреймам.
В дополнении к этим двум понадобится третий документ, загружающийся по умолчанию вместе с набором фреймов.
Это может быть страница, поясняющая, как работать с интерфейсом. Ну и конечно, нужен документ, содержащий собственно какую-нибудь полезную информацию по тематике сайта.
Рассмотрим листинг 18.7, содержащий <frameset>.
Листинг 18.7. Документ, задающий набор фреймов
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1- frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Навигатор статей</title>
</head>
<frameset rows="150. *">
<frame src="navigate.html" />
<frame src="default.html" name=
"main_viewer" />
</frameset>
Создадим navigate.html — страницу навигации.
Она будет расположена вверху страницы и
организована в виде меню <sel ect>.
Код документа показан в листинге 18.8,
причем целевой объект ссылок теперь задается следующим образом: top.main_viewer, location. href.
|
|
|
Как вы, вероятно, помните из главы 12, top — это обозначение для окна браузера.
То же самое обозначение используется и в объектной модели документа, в которой есть все фреймы. А раз они там есть, значит, им можно присвоить URL.
Обратите внимание на то, что в новой версии навигационной страницы пользователь вместо URL видит описание страницы, на которую он собирается переходить. А описания автоматически транслируются в подходящие адреса. Как это делается?
Создается массив адресов, обращение к которым происходит по номеру пункта меню. Нужно организовать этот массив таким образом, чтобы записи <option> в <select> соответствовали списку URL.
Это немного запутанный способ с точки зрения программирования, но зато с точки зрения пользователя он более понятный. Итак:
Листинг 18.8. Страница navigate.html
<!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>
<title>Страница навигации</title>
<script type="text/javascript>
<!------
function changePage(theSelect) {
pageArray = new Array
("default, html", "articlel.html". "article2.Titml".
"article3.html".
"article4.html". "article5.html");
var x = theSelect.selectedlndex;
top.main_viewer.location.href =
pageArray[x];
} //.->
</schpt>
</head>
<body style="background-color: yellow">
<div align="center">
<b1>Архив статей на FakeCorp</h1>
<form name="changeForm">
<р>Какую статью вы хотите прочесть сейчас?</р>
<р>
<select name="changeSelect" onchange=
"changePage(this)"> <option selected=
"select">Haчaльнaя страница</орtiоn>
<орtiоn>Память типа RAM</option>
<орtiоn>Технология изготовления
жестких дисков</орtiоn>
<орtiоnп>Как выбрать монитор</орtiоn>
<option>KaK выбрать новый пpoцeccop</option>
<орtiоn>Решение проблем с операционными
системами</орtiоn>
</select>
</form>
</body>
</html>
Теперь нам нужна страница default. html, которая будет появляться вместе с набором фреймов. Эта страница представляет собой простой XHTML-документ, который дает пользователю определенные пояснения относительно интерфейса, здесь же можно прочитать новости сайта, а также перейти на вариант страницы, не содержащий фреймов.
|
|
|
Листинг 18.9 — это код страницы default.html.
Листинг 18.9. Страница default.html
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional//EN"
"http: //www. w3. org/TR/xhtml 1 /DTD/xhtml 1 -transi ti onal
. dtd">
<html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<title>Домашняя страница</title>
</head>
<body style="margin: 24pt">
<h1>Apxив статей FakeCorp</h1>
<p>C помощью меню, расположенного вверху,
выберите статью. Она автоматически загрузится
в этом окне. Для возврата на данную страницу
выберите в меню "Начальную страницу".</р>
<р>Если вы хотите посетить версию сайта
без фреймов или если ваш браузер не
поддерживает JavaScript, нажмите
<а href="noframes.html">здесь</а>.</р>
<h2>0бновления! </h2>
<p><strong>10/13 --</strong> Мы только что
опубликовали статью, в которой рассказывается
о новейших технологиях создания памяти с
произвольной выборкой (RAM). В ней даются
советы о том. как правильно выбрать память
для своего компьютера. Приводится много данных,
в том числе статистических, которые касаются различных
характеристик, в том числе соотношения параметров
цены и надежности.</р>
<p><strong>10/5 --</strong> Читайте статью об
обновлении процессора. В ней вы сможете найти
много полезной информации, которая поможет вам
решить, настало ли время сменить процессор своего ПК,
и если настало, то что выбрать.</р>
</body>
</html>
Теперь, предполагая, что все статьи на месте и файлы называются ровно так, как про них написано в HTML-коде фреймов, мы можем запустить страницу, в которой описывается весь набор фреймов, и посмотреть результат (рис. 18.6).
Рис. 18.6. С помощью <frameset> и специального меню <select> можно сделать интерфейс,
основанный на JavaScript
Резюме
В этой главе вы узнали о дополнительных возможностях JavaScript, которые касаются обработки пользовательского ввода. Мы начали с дискуссии на тему обработчиков событий, их использования в сочетании с функциями JavaScript с целью создания скриптов, взаимодействующих с пользователями. Затем мы обратились к объектной модели документов (DOM), обсудили некоторые объекты, входящие в нее, их свойства и методы.
После этого мы (DOM, обработка событий, JavaScript) рассмотрели создание HTML-формы. Вы узнали, как осуществлять проверку вводимых пользователями данных, как создавать формы, целиком обрабатываемые JavaScript (не выходя за пределы пользовательского компьютера), как можно обойти CGI-скрипты.
Наконец, последний раздел главы был посвящен автоматическому изменению содержимого веб-страниц. Вы увидели примеры переадресации в зависимости от используемого браузера, создания навигационного меню, построения довольно сложного интерфейса, основанного на интеграции JavaScript во фреймы.
В следующей главе мы продолжим свое знакомство с JavaScript и его совместной работе с технологией CSS. Такой подход часто называют Динамическим HTML (DHTML).
Глава 19. Dynamic HTML
- Знакомьтесь: Динамический HTML
- Вернемся к DOM
- О совместимости браузеров
- CSS и CSSP
- Просто наводим указатель мыши на элемент...
- Наведение указателя мыши на изображение
- Дистанционное изменение изображений по наведению указателя мыши
- Предварительная загрузка графики
- CSSP и слои
- Основы CSSP
- Перекрытие элементов. Z- индекс
- Вложенное позиционирование документов
- Относительное позиционирование
- Динамическое позиционирование и слои
- Слои CSSP
- Динамическое позиционирование
- Видимость элементов CSSP
- Слои Netscape
- Внутристрочные слои Netscape
- Программная обработка слоев Netscape
- Пример страницы с DHTML, не зависящей от браузера
- Межбраузерный программмный интерфейс (API)
- Динамические стили и классы
- Программирование стилей и свойств
- Динамические классы и идентификаторы
- Резюме
Как вы думаете, что такое Dynamic HTML? Наверное, язык такой? А может быть, какой-то особый стиль написания страниц? Динамичный такой, напористый... Все гораздо проще. Когда на одной странице встречаются JavaScript, CSS и DOM, это часто называется Dynamic HTML. Эти документы предназначены для интерактивного взаимодействия с пользователями, включающего в себя некоторые спецэффекты, помогающие представлять информацию более ярко и информативно.
Вид DHTML может меняться от браузера к браузеру, и это вполне понятно. Даже такие гиганты, как Netscape и Microsoft, не хотят прийти к общему соглашению. В этой главе мы основное внимание уделим рассмотрению тех элементов, которые присутствуют в браузерах обоих производителей, обратим особое внимание на совместное использование JavaScript и таблиц стилей. Мы попытаемся создать, автоматически изменяющиеся страницы. Итак, разделы этой главы:
- что такое Dynamic HTML, каковы преимущества его использования;
- «величайшие хиты» Dynamic HTML: изменение изображения при наведении на него мыши;
- слои: обзор возможностей, общие понятия, программирование;
- работа с таблицами стилей: программирование классов и стилей.
Знакомьтесь: Динамический HTML
Давайте начнем разговор о Dynamic HTML с определения того, чем он не является. Dynamic HTML не является официальным стандартом. HTML превратился в XHTML и стал стандартом. CSS — стандарт с момента рождения. То же самое касается объектной модели документов (DOM). Но Dynamic HTML — это нечто большее, чем коммерческий термин. Большее, чем неофициальное название какой-нибудь спецификации, подразумевающей использование скриптов и DOM для I программирования каких-нибудь визуальных трюков. Dynamic HTML в некоторых случаях означает, что вы используете скрипты для изменения таблиц стилей В некоторых случаях означает, что вы включили в свой проект использование так называемых «слоев» — технологии, позволяющей накладывать разные части документа друг на друга и даже скрывать их.
Вы уже знакомы с небольшими примерами Dynamic HTML из главы 18, когда шел разговор о возможном доступе к массиву images и открытии и перезаписи объекта document. Мы расширим эти примеры в этой главе, узнаем кое-какие новые при емы. Для начала дополним понятие Dynamic HTML, пересмотрев заново объектную модель документов (DOM) и некоторые другие важные технологии.
ПРИМЕЧАНИЕ
В недавнем прошлом Dynamic HTML означал нечто другое. Netscape, к примеру, подразумевал под этим термином технологию скачиваемых шрифтов, которая была совершенно по-другому реализована у Microsoft и привела к их несовместимости. Microsoft же называла DHTML некоторые эффекты фильтрации, реализованные в браузерах этой фирмы. В данной главе я склонен подразумевать под этим понятием аспекты, связанные с CSS и CSSP (позиционирование CSS). Несколько другие аспекты отражены в специальных изданиях, посвященных непосредственно DHTML.
Вернемся к DOM
Тот факт, что объектная модель документов только недавно стала стандартом, действительно важен. Консорциум W3C принял в качестве рабочей версии для утверждения новой спецификации DOM уровня 3. Новейшие веб-браузеры (Internet Explorer 6.x и Netscape 6.x) имеют поддержку DOM-2, что тоже очень неплохо. Это означает, что IE и Netscape все-таки смогли сблизиться и стали более совместимыми, чем были раньше.
Когда оба браузера были в возрасте, соответствующем версии 4.0, объектная модель документов была только-только представлена на суд общественности. Реализация, конечно, отличалась, что и было понятно, учитывая отсутствие каких-либо стандартов в этой области. Обе компании стремились к тому, чтобы включить в модель и предложить пользователю как можно больше объектов и свойств, не очень при этом оглядываясь друг на друга. Интерес их вполне объясним — он на тот момент был чисто коммерческим. Однако итог получился несколько печальный: большинство пользователей металось между двумя реализациями DOM, не в силах понять, за какой из них будущее.
Несмотря на то что базовые объекты, которые вам встретились в главе 18, всегда были основополагающими и неизменными, к моменту появления браузеров поколения 4.0 возникло огромное множество дополнительных. В Internet Explorer почти все элементы страницы были превращены Microsoft в объекты, а значит, появилась возможность использования их в скриптах. Кроме того, документы, загруженные в Internet Explorer, получили возможность изменяться без перезагрузки, элементы можно было изменить «на лету». Netscape 4.x такого не умеет, хотя 6-я версия уже умеет, да и вообще, предлагает более полную реализацию теперь уже стандартизованной модели.
О совместимости браузеров
Эти совершенно разные подходы в конечном итоге затормозили процесс внедрения технологии DHTML, не говоря уж о том, что реализация отдельных ее составляющих — JavaScript, CSS — оказалась крайне несбалансированной. Какой вывод отсюда следует? DHTML внедрен, стандарты отдельных частей согласованы, поэтому имеет смысл использовать именно его, даже если возникает желание использовать на веб-странице какой-то другой формат. Пользователь не сможет оценить
ваш шедевр, потому что не увидит ничего вообще. Я считаю, что нужно с виртуальных трибун своих веб-сайтов пропагандировать новейшие браузеры, ставить ссылки на те места, откуда их можно скачать. По крайней мере, если ваш сайт хоть как-то связан с информационными технологиями. Конечно, если информационное пространство, созданное вами, посвящено японскому искусству, то пропаганда каких-то браузеров будет неуместна. IE 5.5 и 6, Netscape 6 более или менее стан дартизованы, приемы DHTML в применении к ним оказываются в основном кросс-платформенными.
В этой главе мы не будем снова вспоминать времена 4-го поколения двух извест ных браузеров, поскольку уже существуют определенные стандарты W3C и надо стараться придерживаться их. Если же вам придется когда-нибудь писать сайт для какого-то конкретного нестандартного браузера, используйте переадресацию. Скорее всего, для такого браузера соответствующая страница будет представлять со бой просто урезанную исходную. В ней не будет JavaScript, возможно, не будет фреймов. Я еще помню те годы, когда на очень многих сайтах в углу висела маленькая табличка, предупреждающая о том, что лучшая программа просмотра для этой странички — это, например, Netscape. Можно поступить так же, хотя смотрится это несколько архаично в наше время, когда все только тем и занимаются, что борются за совместимость.
Чтобы узнать больше о том, что может, а чего не может в плане использования DHTML тот или иной браузер, лучше всего сходить на сайт его производителя. Например, на сайте Netscape можно узнать многое по вопросам, связанным с DOM, DHTML и Netscape 6 (http://developer.netscape.com/tech/dom/). О взаимоотношениях Netscape 4.x и DHTML можно узнать на http://developer.netscape.com/tech/ dynhtml/index.html. О Microsoft, HTML и DHTML читайте на сайте
http://msdn.mi crosoft.com/libra ry/default.asp?url=
/workshop/author/dhtml/dhtml_node_entry.asp.
ПРИМЕЧАНИЕ
Подобная манера Microsoft составлять такие URL (как показано выше) — ярчайший пример того, как не следует делать, если вы хотите, чтобы посетители к вам стремились. Видимо, компании Microsoft, несмотря ни на что, не грозит пострадать от недостатка посетителей ее сайта, только этим можно объяснить такое пренебрежительное отношение к собственным адресам. Если есть возможность, старайтесь избегать косвенных URL, делайте ссылки проще.
CSS и CSSP
Начиная с версии 4.0 и Netscape, и Internet Explorer имеют поддержку стандарта каскадных таблиц стилей и их программируемых элементов. Можно сказать, что CSS — это основная составляющая Dynamic HTML.
Кроме стандарта CSS, о котором мы уже вели долгий разговор в главе 10, есть еще одна технология под названием CSSP (CSS Positioning), смысл которой состоит в том, чтобы не только задавать стиль элементов HTML, но и точно определять их местоположение, позиционирование на странице. В частности, можно накладывать одни элементы на другие, прятать их друг за дружкой. Но самое интересное заключается в том, что и IE 6, и Netscape 6 знают о том, что элементы CSSP — программируемые. Их можно изменять с помощью скриптов, и сейчас мы узнаем, каким образом это делается.
Просто наводим указатель мыши на элемент, и...
...Он изменяется. Это очень популярная шутка, которую позволяет реализовать DHTML. И графику, и свойства текстовых сообщений можно менять по событию, которое называется onmouseover, то есть «наведение указателя мыши». Щелкать на элементе не надо — все произойдет само. Скрипты, обрабатывающие onmouseover, создаются очень просто (что, несомненно, добавляет им популярности), а выглядят эффектно.
Хотя этот прием, основанный на CSS (использующий псевдоклассы типа a.hover), будет работать и в Netscape 4, но, если его переписать под DOM, про этот браузер можете забыть. Только IE 4 и выше или Netscape 6 и выше. Если с помощью эффекта наведения мыши вы хотите передать какую-то важную информацию-, то следует позаботиться о пользователях более старых браузеров.
Наведение указателя мыши на изображение
Давайте для начала рассмотрим пример, который заставляет изображение поменяться при наведении на него указателя мыши. Такой прием может не только продемонстрировать ваши возможности как программиста и возможности пользователя как водителя мыши, он позволяет разместить два изображения на месте одного. Итак, листинг 19.1 показывает, как это делается.
Листинг 19.1. Наведение указателя мыши на изображение
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xml ns="http://www.w3.org/1999/xhtml">
<head>
<title> Смена изображения при наведении мыши
</title>
</head>
<script type="text/javascri(}t"> <!_.
. function changelmage() {
document, images.
m|y Image. src="second. jpg"; }
function changeBackO {
document.i mages.myImage.src="fi rst.jpg":
// --> </script>
<body>
<р>Наведение указателя мыши
на изображениеы изменяет его...</р>
<img src="first.jpg" id="mylmage"
onmouseover="changelmage()" onmouseout=
"changeback()" />
</body>
</html>
Когда пользователь помещает указатель мыши на изображение, файл first.jpg заменяется на second.jpg. При сдвиге указателя в какую-нибудь сторону старое изображение возвращается на место. Эти состояния показаны на рис. 19.1, а и 19.1, б.
Рис. 19.1, а. Страница до наведения указателя мыши на картинку
Рис. 19.1, б. Страница после наведения указателя мыши на картинку
ПРИМЕЧАНИЕ
Чтобы этот эффект заработал, ваши картинки должны быть абсолютно одинакового размера, с точностью до пиксела. Если они хотя бы чуть-чуть отличаются, вы получите непредсказуемый результат. IE может переформатировать страницу, и это будет выглядеть откровенно плохо, a Netscape может вообще отказаться показывать изображения.
Как видите, скрипт получился довольно простой, при этом все, что в нем используется, вам уже известно. В его основе лежит работа с объектом images, который является составной частью объекта document:
function changelmage()
{
document.images. images01. src=" second. jpg":
}
В этом примере изображению было присвоено имя с помощью атрибута i d=" i mage01 ". Атрибут — новый для элемента <img>. Он позволяет сослаться на картинку по имени, указанному в этой объектной ссылке. Это удобно, но так делать не обязательно. Как вы помните, images — это массив. Значит, к его элементам можно получить доступ по их индексам. Так, например, встречаются такие участки кода:
function changelmageO
{
document. images [0].src=" second. jpg":
}
Вы получите тот же результат, так как imageOl и image[0] представляют собой одну и ту же ссылку.
Дистанционное изменение изображений по наведению указателя мыши
Еще один "хит" DHTML —дистанционное изменение изображений по наведению указателя мыши. Это означает следующее: пользователь может навести указатель на любой элемент — гиперссылку, например, — и это приведет к изменению изображения где-нибудь совсем в другом углу страницы.
В этом примере в качестве основы разметки будет использована таблица. Слева находятся ссылки, которые воспринимают наведения указателей, справа — изображение. Если пользователь решит щелкнуть на ссылке, загрузится соответствующая страница; если же только наведет на нее указатель мыши, то поменяется изображение.
ПРИМЕЧАНИЕ
Этот пример сделан таким образом, что он будет работать и в более ранних версиях браузеров. От них требуется лишь поддержка таблиц. Во всяком случае, даже если эффект замены изображений и не будет виден, пользователь может щелкнуть на ссылке, чтобы увидеть то, что хочет. То есть никаких особых убытков он не несет. Просто изображения будут более традиционными.
Листинг 19.2 содержит код такой страницы.
Листинг 19.2. Удаленное управление сменой изображений
<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML
1.0 Transitional/7EN" "http://www.w3.org/TR/xhtmll/
DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<titlе>Демонстрация динамических изображений<titlе>
</head>
<style> a. h1 {font-family: Ariel. Helvetica}
</style>
<script type="text/javascript">
function changelmage (indexNum)
{
if (indexNum==l) document.images.
image01.src="main.jpg";
if (indexNum==2) document.images.
image01.src="maple.jpg":
function changelmage (indexNum) {
document.images.image01.src="logo jpg";
)
// -->
</script>
<body>
<h1>Пёрёчень домов, выставляемых
на продажу</h1> -,.
<table border="0" width="600" cellpadding="10">
<tr>
<td width="380">
<p><a href="1980.html" onmouseover=
"change!mage(l)" onmouseout="changeBack()">
1980 Главная ул.</а></р>
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 339; Нарушение авторских прав?; Мы поможем в написании вашей работы!