Страница, управляемая при помощи мыши
Результат показан на рис. 7.6. Так страница будет выглядеть сразу после загрузки. Обратите внимание на то, что вторая кнопка изначально недоступна. Для красоты мы отделили наши кнопки от основного текста тем же разделителем, который использован в конце страницы.
Рис. 7.6. Веб-страница, на которой “бесполезная” в данный момент кнопка недоступна
Заметим, что приведенная выше страница будет работать только в Internet Explorer. Ее можно заставить работать и в Netscape 6 тем же способом, который мы применили в предыдущем примере – путем написания функции, присваивающей одной и той же переменной либо значение document.all, либо document.getElementByld, в зависимости от типа браузера:
var doc, butt1, butt2; function brws(), { if (navigator.appName != "Netscape") { butt1 = document.all.butt1; butt2 = document.all.butt2; doc = docunysnt.all.doc; } else { butt1 = document.getElementById("butt1"); butt2 = document.getElementById("butt2"); doc = document.getElementById("doc"); } }Затем следует переписать функции noBg() и colChange(), убрав из них обращение document.all:
function noBg() { if (doc.style.backgroundlmage != "none") { doc.style.backgroundlmage = 'none'; butt1.value = 'Вернуть фоновый рисунок'; butt2.disabled = false; } else { doc.style.backgroundlmage = "url('Images/gradi.jpg')"; butt1.value = 'Убрать фоновый рисунок'; butt2.disabled = true; } } function colChange() { if (doc.style.backgroundColor != 'white') { doc.style.backgroundColor = 'white'; butt2.value = 'Сделать фон зеленым'; } else { doc.style.backgroundColor = '#BFFFBF'; butt2.value = 'Сделать фон белым'; } }И, наконец, назначить выполнение функции brws() сразу после загрузки страницы:
<BODY ID="doc" onLoad="brws()">Теперь наш код будет одинаково работать и в Internet Explorer 4+, и в Netscape 6. Что касается Netscape 4, то, если постараться, можно заставить эту страницу работать и там, но это будет довольно сложно. В Netscape 4 нельзя получить доступ непосредственно к свойствам тега <BODY>, однако браузер можно “обмануть”, использовав либо тег <LAYER> и коллекцию document.layers, либо свойства типа document.body.bgColor. Давайте лучше не будем этим заниматься, тем более что смотреть нашу страницу в Netscape 4 все равно можно, просто обе наши кнопки в нем вообще не отобразятся (этот браузер не воспринимает теги <INPUT> вне элемента <FORM>).
Реализация операций перетаскиванием
Итак, мы рассмотрели несколько основных обработчиков событий. Однако существуют и другие события мыши. Например, веб-страница может отдельно реагировать на нажатие кнопки мыши, на ее отпускание и даже на ее движение. Для чего это может понадобиться? Одно из возможных применений – это реализация так называемой технологии drag-and-drop, (проще говоря – перетаскивания экранных объектов с помощью мыши. Для иллюстрации рассмотрим несложный пример.
Предположим, вы хотите проиллюстрировать на своей странице знаменитую игру Лойда “Пятнадцать”, например так, как показано на рис. 7.7. Нужно, вроде бы, сначала просто задать стиль для текста:
<STYLE> BODY { .background-color: #979797; color: #FEFEFE; text-align: center; font-weight: bold; font-size: 30px; font-family: sans-serif; } </STYLE>Затем вывести на экран заголовок; потом создать центрированный блок (<DIV>) с фиксированной шириной и высотой, а также небольшим отсту- пом сверху, заданным с помощью стилевого свойства margin-top:
<DIV ALIGN="center" STYLE="width: 400px; height: 400px; margin-top: 25px;">