Страница, управляемая при помощи мыши
Мы уже говорили о том, что одним из самых привлекательных нововведений HTML 4.0 является возможность динамически изменять страницы и реагировать на действия пользователя. Давайте рассмотрим, как такая реакция может осуществляться.
Помните, как в примерах Главы 4 мы изменяли цвет гиперссылки при наведении на нее мыши? Это происходило с помощью псевдокласса :hover. Однако этот псевдокласс пока что определен только для тега <А>. А как быть, если мы хотим изменить цвет обычного текста при наведении на него мыши?
Рассмотрим, как это делается. Допустим, мы написали небольшую тестовую страницу.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Обработка событий мыши</TITLE></HEAD> <BODY>Этот текст не изменит свой цвет. Этот текст изменит свой цвет, если навести на него мышь! Этот текст не изменит свой цвет. </BODY> </HTML>Реакция на наведение
Теперь давайте сделаем так, чтобы вторая строка этого текста действительно изменяла свой цвет при наведении указателя мыши. Для начала давайте выделим ее в отдельный блок:
<DIV>Этот текст изменит свой цвет, если навести на него мышь!</DIV>Чтобы при наведении мыши что-нибудь произошло, нужно добавить обработчик событий onMouseOver:
<DIV onMouseOver="">Этот текст изменит свой цвет, если навести на него мышь</DIV>Итак, обработчик добавлен, однако пока он ничего не делает. В кавычки нужно поместить то действие, которое он должен выполнить. А что он дол жен сделать? Изменить цвет этого блока <DIV>, например, на красный. Доступ к свойствам текущего элемента осуществляется с помощью ключевого слова this:
<DIV onMouseOver="this.style.colors=red">Этот текст изменит свой цвет, если навести на него мышь!</DIV>Если теперь открыть эту страницу в браузере, то при наведении указателя мыши на вторую строку текста, цвет строки действительно изменится на красный. Однако, один раз изменившись, он так и останется красным. Чтобы при уводе указателя мыши со строки цвет изменился обратно на черный, добавим обработчик событий, реагирующий на увод указателя. Он называется onMouseOut:
<DIV onMouseOver="this.style.color='red'" onMouseOut="this.style.color='black'"> Этот текст изменит свой цвет, если навести на него мышь!</DIV>Теперь при наведении указателя мыши на эту строку, ее цвет изменится на красный, а при уводе указателя – обратно на черный. Можно также использовать и доступ по названию элемента. Например, если установить в этом блоке атрибут ID="text1", то можно будет написать так:
<DIV ID="text1" onMouseOver="text1.style.color='red'" onMouseOut="text1.style.color='black'"> Этот текст изменит цвет, если навести на него мышь!</DIV><DIV ID="text1" onMouseOver="document.all.text1.style.color='red'" onMouseOut="document.all.text1.style.color='black'">Этот изменит свой цвет, если навести на него мышь!</DIV>Обратите внимание на то, что внутри кавычек расположен текст, написанный на языке JavaScript. Чтобы не загромождать текст HTML-документа, можно заранее определить соответствующие функции в разделе <HEAD>:
<HEAD> <TITLE>Обработка событий мыши</TITLE> <SCRIPT LANGUAGE="JavaScript"> //<!-- function change() { document.all.text1.style.color = "red"; } function change2() { document.all.text1.style.color = "black"; } //--> </SCRIPT></HEAD>…а при определении обработчиков событий писать только имена функций:
<DIV ID="text1" onMouseOver="change()" onMouseOut="change2()">Этот текст изменит свой цвет, если навести на него мышь!</DIV>Результат будет тот же, что и в прошлый раз.