Пакет Adobe GoLive
Окно браузера с результатом отображения
Рисунок 7.6. Окно браузера с результатом отображения файла, приведенного в листинге 7.6, в тот момент, когда пользователь навел курсор мыши на второй абзац
При загрузке в браузер этого файла будет видно, что при попадании курсора мыши на второй абзац, тот сдвигается вправо и вниз, а после того, как курсор мыши покидает его, абзац возвращается к своему исходному положению (Рисунок 7.6).
Теперь рассмотрим код, чтобы узнать, за счет чего мы можем добиться подобного эффекта. Как видно, мы установили идентификатор для второго абзаца, и две функции, выполняемые при наступлении событий
onmouseover И onmouseout.
Событие onmouseover, наступающее в тот момент, когда пользователь наводит курсор мыши на второй абзац, мы обрабатываем при помощи функции moving. В этой функции мы изменяем некоторые свойства объекта style для элемента с идентификатором pi. Использование объекта style мы обсуждали в предыдущем разделе этой главы. Сейчас нас интересует именно механизм перемещения содержимого абзаца. Мы использовали три свойства: position, top и left. Свойству position мы придали значение relative, которое позволяет нам смещать расположение элемента относительно его начального размещения. После того достаточно было изменить значения свойств top и left, и абзац изменил бы свое расположение. В нашем примере мы использовали для этих свойств одно и то же значение — Юрх. Это позволяет смещать абзац вниз и влево одновременно на десять пикселов.
Но после того, как мы сместили абзац, было бы неплохо вернуть его на место. Возврат осуществляется при пернмещении пользователем курсора мыши с территории, занимаемой выбранным текстовым абзацем. Следовательно, необходимо обрабатывать событие onmouseout. Для этих целей мы внесли в наш
скрипт функцию reverse. Она также работает с объектом style. Но для того, чтобы вернуть абзац к его начальному положению, достаточно всего лишь придать свойству position значение static. Мы уже знаем, что при помощи этого значения мы задаем статическое позиционирование для элемента. Следовательно, он будет отображаться именно так, как это было при начальной загрузке страницы. Проще говоря, он вернется на исходное место.
Мы рассмотрели динамическое позиционирование элементов, которое основано на применении относительного типа позиционирования. Но ведь есть еще и абсолютное позиционирование. Оно обычно применяется для создания эффектов позиционирования элементов, не привязанных к их расположению на Web-странице по умолчанию.
В качестве примера мы можем создать страницу, на которой некое слово будет постоянно отображаться в верхнем левом углу окна просмотра браузера, вне зависимости от того, как пользователь прокручивает содержимое документа. Также мы разместим это слово под основным содержимым Web-страницы, применив для этого свойство z-index. В общем случае подобный документ может создаваться при помощи кода, приведенного в листинге 7.7.
