Иллюстрированный самоучитель по созданию сайтов › Веб-страницы, реагирующие на действия пользователя › Страница, управляемая при помощи мыши [страница - 113] | Самоучители по работе в Internet

Страница, управляемая при помощи мыши

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

<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. Страница, на которой цвет строк может изменяться