Страница, управляемая при помощи мыши
Результат показан на рис. 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, (проще говоря – перетаскивания экранных объектов с помощью мыши. Для иллюстрации рассмотрим несложный пример.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Предположим, вы хотите проиллюстрировать на своей странице знаменитую игру Лойда “Пятнадцать”, например так, как показано на рис. 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;">