Хотя динамический HTML кажется живым, на самом деле вся сеть по-прежнему почти статична. Конечно, некоторые из наиболее авангардных веб-сайтов уже некоторое время содержат интерактивный контент, но большинство из них по-прежнему реализуются с помощью плагинов или путем написания нескольких страниц для разных версий браузеров. Большинству производителей веб-страниц, даже если они хотят написать несколько версий страницы, им трудно найти время. Кроме того, веб-страницы, которые могут достичь интерактивных эффектов, обычно требуют высокой пропускной способности. автор и зритель. Однако так не должно быть. Здесь вы можете научиться быстрому и простому способу добавления эффектов DHTML к веб-страницам в условиях низкой пропускной способности. Это метод наведения курсора мыши. Этот метод не требует загрузки каких-либо изображений или записи нескольких страниц.
Улучшение информации о захвате мыши.
Наведение курсора мыши — один из наиболее широко используемых и эффективных динамических методов в Интернете, и веская причина в том, что он позволяет зрителю получить четкую и прямую обратную связь. Подумайте об этом так: наведите указатель мыши на гипертекстовую ссылку, и ссылка станет выделенной, изменит цвет или изменится иным образом, сказав: «Я — ссылка!»
Это не означает, что все созданные ссылки при наведении курсора мыши одинаковы. Они разные. Худшая ситуация заключается в том, что ссылки при наведении курсора мыши реализованы на языке Java или в специальных форматах, таких как формат Shockwave от Macromedia, который требует от зрителя установки плагина, чтобы увидеть эффект. В лучшем случае ссылки при наведении курсора мыши пишутся на языке JavaScript, который поддерживается всеми браузерами. Но даже если он реализован с помощью JavaScript, браузер все равно требует загрузки двух изображений: одного для высокой яркости и одного для нормального отображения, что является пустой тратой использования полосы пропускания.
Теперь давайте посмотрим на DHTML, который создает ссылки при наведении курсора мыши без загрузки изображений. Единственное, что следует отметить, это то, что код DHTML должен быть открыт браузером для открытия объектов веб-страницы, таких как ссылки и стили, чтобы их можно было описать объектной моделью документа (DOM). Другими словами, в настоящее время код работает только в Internet Explorer 4.0. Однако браузер Netscape пятого поколения (который, как ожидается, будет выпущен к концу этого года) будет полностью поддерживать DOM. Кроме того, не беспокойтесь о том, что ссылки при наведении курсора используются в несовместимых браузерах; браузеры, которые не поддерживают код DHTML на странице, просто проигнорируют их. (Подробнее см. в разделе «Пусть DOM работает на вашем веб-сайте» ниже.)
Обычные веб-страницыCode
Ordinary разделены на две основные области: одна — область содержимого, а другая — область навигации. Ссылки при наведении курсора обычно появляются в области навигации. Обычно выделенные кнопки используются для направления зрителей к различным областям сайта, таким как графика сайта или страницы отзывов. Вместо использования кнопок мы собираемся превратить обычные текстовые ссылки в интерактивные ссылки при наведении курсора мыши. Метод: сначала вставьте в документ обычные текстовые ссылки, например:
< a href="contact_us.html">
Свяжитесь с нами.
Второй шаг меняет цвет текстовой ссылки при наведении на нее указателя мыши. Программа-скрипт DHTML выглядит следующим образом:
functionrollon( ){
if (window.event.srcElement.tagName
== "A"){
window.event.srcElement.color
= "red";}
}
functionrolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover =rollon;
document.onmouseout
=rolloff;
< В середине тега script> вставьте его в
веб-страницы, и вы сразу же сможете добиться эффекта наведения курсора мыши на каждую текстовую ссылку. Ниже мы подробно разберем, как этого добиться.Написанная ранее программа-скрипт определяет две ключевые функции: роллон (активируется, когда мышь перемещается по ссылке) и роллофф (активируется, когда мышь уходит от ссылки). Каждая функция начинается с простого оператора if, что означает: каждый раз, когда событие onmouseover вызывается в веб-документе, функцияrollon уведомляет браузер, чтобы определить, является ли объект, активирующий событие, тегом привязки (window.event. srcElement.tagName == "A"). Если это так, скрипт применит к ссылке специальный стиль (в данном случае красный). Аналогично, когда происходит событие onmouseout, функция Rolloff вернет стилю цвет по умолчанию (color="").
Последние две строки этого скрипта уведомляют браузер о необходимости выполнения функцииrollon при возникновении события onmouseover и об отключении функции ссылки при наведении курсора (mouseover) при возникновении события onmouseout.
Получите вдвое больший результат, прилагая вдвое меньше усилий
. Internet Explorer 4.0 позволяет использовать DHTML для управления каждым объектом в документе. Естественно, вы можете выполнять больше функций, помимо изменения цвета тега привязки. Фактически, вы можете применить любой элемент из каскадных таблиц стилей (CSS, стандартная спецификация форматирования W3C) к любому типу объекта или компонента ресурса. Например, помимо того, что ссылка становится красной, вы также можете добавить или удалить из нее подчеркивание.
Чтобы удалить подчеркивание, просто вставьте следующий атрибут стиля во все теги привязки на странице:
style = «text-decoration: none»
Этот оператор удалит подчеркивание из ссылки, придав ей обычный вид или состояние по умолчанию. (По умолчанию Internet Explorer 4.0 и Navigator 4.0 подчеркивают все текстовые ссылки. Приведенный выше оператор поочередно изменит состояние этих ссылок по умолчанию.)
Затем добавьте следующий оператор под функцией Rollon:
window.event.style.
textDecoration = "underline";
Теперь ресурс для определенного вами события наведения курсора станет красным и будет иметь стиль подчеркивания. Следует отметить, что подчеркивание можно удалить, добавив в функцию свертывания следующий оператор:
window.event.srcElement.style.
textDecoration = "none"
Приведенные выше функции модификации, которые можно быстро реализовать, демонстрируют мощь простого DHTML; Программа-скрипт не требует загрузки каких-либо изображений, но использует очень гибкий и переносимый код для создания привлекательных визуальных эффектов. Могу сказать, что вы можете использовать его для доступа к любому документу, даже в старых браузерах. Если вы хотите получить этот код и освоить его самостоятельно, посетите наш сайт: www.windowspro.com .
-------------------
Эдвард Гроссман является продюсером сайта www.windowspro.com . Он имеет докторскую степень по философии и занимался исследованиями в области. философия до появления Интернета. Его адрес электронной почты: [email protected]
Просто добавьте около 15 строк кода в ①заголовок документа, и вы сможете превратить ②обычные текстовые ссылки на любой веб-странице в ③интерактивные ссылки, активируемые мышью (наведение курсора мыши).
------------
Заставьте DOM работать на вашем веб-сайте.
Благодаря динамическому HTML (DHTML) объектно-ориентированное программирование больше не является чем-то, чем могут заниматься только специалисты по программированию, оно становится доступным каждому. Область, в которой даже есть опыт работы в Интернете. создатели страниц могут принять участие. Во многом это благодаря объектной модели документа или DOM. Эта спецификация W3C рассматривает каждый компонент документа как объект, будь то документ, стиль или ссылка. Скрипты могут изменять эти объекты на основе пользовательского ввода, типа браузера или многих других переменных, включая изменение размера, изменение стиля или обновление ссылки.
DOM может открыть весь документ, что позволяет веб-авторам создавать легко настраиваемые интерактивные страницы, не создавая при этом больших затрат на загрузку для пользователей. Это не только позволяет использовать ссылки при наведении курсора мыши с низкой пропускной способностью, но также позволяет использовать свертываемые меню просмотра веб-страниц и перемещаемые компоненты страницы (такие как изображения, текстовые блоки и т. д.).
Для получения дополнительной информации о DOM посетите сайты: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ и Developer.netscape.com/docs/manuals/communicator/dynhtml/.
Чтобы увидеть примеры приложений DHTML, посетите сайты www.windowspro.com и www.projectcool.com (попробуйте перетащить Saturn) и просмотрите «Просмотр исходного кода».
В IE 4.0 вы можете использовать динамический HTML для управления десятками объектов. Подробный список доступен на сайте www.microsoft.com .