Страница, управляемая при помощи мыши
Таким же образом можно изменить не только тот блок текста, на который мы навели указатель мыши, но и любые другие элементы, если только присвоить им имя. Например, если мы хотим одновременно с изменением цвета второй строки на красный изменять цвет третьей строки, скажем, на зеленый, достаточно будет сначала присвоить третьей строке имя:
<DIV ID="text2">Этот текст изменит свой цвет, если мышь навести на вторую строку!</DIV>…а потом соответствующим образом изменить функции:
function change() { document.all.text1.style.color = "red"; document.all.text2.style.color = "green"; } function change2() { document.all.text1.style.coior = "black"; document.all.text2.style.color = "black"; }Теперь при наведении мыши на вторую строку ее цвет будет изменяться на красный, а цвет третьей строки – на зеленый. К сожалению, здесь начинают сильно сказываться различия между браузерами. Доступ через метод document.all будет работать в Internet Explorer, но не сработает в Netscape. Чтобы этот пример мог работать в Netscape 6, необходимо доступ через метод document.all заменить на доступ через метод document.getElementByld(). А как быть, если мы хотим, чтобы этот пример работал и в Internet Explorer, и в Netscape 6?
Учет различий между браузерами
Такие вопросы обычно решаются не просто. Но в данном случае мы можем осуществить проверку версии браузера и, в зависимости от ее результата, присвоить переменной text1 либо значение document.all.text1, либо значение document.getElementByld("text1"). А затем в функциях замены цвета просто подставлять эту переменную. То же самое можно проделать и с переменной text2. Только нужно не забыть заранее определить эти переменные:
var text1, text2; function brws() { if (navigator.appName != "Net scape") { text1 = document.all.text1; text2 = document.all.text2; } else { text1 = document.getElementById("text1"); text2 = document.getElementById("text2"); } }Теперь необходимо сделать так, чтобы нагла функция brws() выполнялась сразу после загрузки страницы. Для этого установим в теге <BODY> обработчик событий, реагирующий на загрузку элемента. Он называется onLoad:
<BODY onLoad="brws()">Посмотрим, что у нас получается в целом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transional//EN"><HTML> <HEAD> <TITLE>Обработка событий мыши (1E4, NN6)</TITLE> <SCRIPT LANGUAGE="JavaScript"> //<!-- var textl, text2; function brws() { if (navigator.appName != "Netscape") { text1 = document.all.text1; text2 = document.all.text2; } else { text1 = document.getElementById("text1"); text2 = document.getElementById("text2"); } } function change() { text1.style.color = "red"; text2.style.color = "green"; } function change2() { text1.style.color = "black"; text2.style.color = "black<"; } //--> </SCRIPT></HEAD> <BODY onLoad="brws()">Этот текст не изменит свой цвет. <DIV ID="text1" onMouseOver="change() " onMouseOut="change2()"> Этот текст изменит свой цвет, если навести на него мышь! </DIV> <DIV ID="text2">Этот текст изменит свой цвет, если мышь навести на вторую строку!</DIV></BODY> </HTML>Результат можно увидеть на рис. 7.5. Теперь этот пример работает и в браузере Internet Explorer, и в браузере Netscape 6. Конечно, хотелось бы создавать такие страницы, которые бы работали по крайней мере в этих двух браузерах, потому что в Netscape версии 4 поддержка динамических страниц вообще очень слабая. Однако это не всегда возможно. В этой книге в дальнейшем все примеры будут ориентированы на браузер Internet Explorer версии 4 и выше (если специально не оговорено обратное).
Рис. 7.5. Страница, на которой цвет строк может изменяться