Иллюстрированный самоучитель по созданию сайтов



           

Реакция на наведение - часть 2


Обратите внимание на то, что внутри кавычек расположен текст, написанный на языке JavaScript. Чтобы не загромождать текст HTML-документа, можно заранее определить соответствующие функции в разделе

<HEAD>:

<HEAD>

<ТIТLЕ>Обработка событий мыши</ТIТLЕ>

<SCRIPT LANGUAGE="JavaScript">

function change() { document, all. textl. style. color="red";

} .function change2() { document.all.textl.style.color="black";

} //--> </SCRIPT> </HEAD>

а при определении обработчиков событий писать только имена функций:

<DIV ID="textl" onMouseOver="change()" onMouseOut="change2()">Этот текст изменит свой цвет, если навести на него мышь!</DIV>

Результат будет тот же, что и в прошлый раз.

Таким же образом можно изменить не только тот блок текста, на который мы навели указатель мыши, но и любые другие элементы, если только присвоить им имя. Например, если мы хотим одновременно с изменением цвета второй строки на красный изменять цвет третьей строки, скажем, на зеленый, достаточно будет сначала присвоить третьей строке имя:

<DIV ID="text2">Этот текст изменит свой цвет, если мышь навести на вторую строку!</DIV>

а потом соответствующим образом изменить функции:

function change() { document.all.textl.style.color="red";

document.all.text2.style.color="green";

} function change2() {

document.all.textl.style.coior="black";

document.all.text2.style.color="black"; }

Теперь при наведении мыши на вторую строку ее цвет будет изменяться на красный, а цвет третьей строки — на зеленый. К сожалению, здесь начинают сильно сказываться различия между броузерами. Доступ через метод documental! будет работать в Internet Explorer, но не сработает в Netscape. Чтобы этот пример мог работать в Netscape 6, необходимо доступ через метод document, all заменить на доступ через метод document.getElementByld( ). А как быть, если мы хотим, чтобы этот пример работал и в Internet Explorer, и в Netscape 6?




Содержание  Назад  Вперед