Страница, управляемая при помощи мыши
Кнопки, влияющие на вид страницы
Теперь рассмотрим такой пример. Предположим, мы разместили на веб-странице сказку, с градиентным феном. Однако, возможно, кому-то этот фон может помешать читать текст, и, заботясь о пользователе, хочется предусмотреть кнопку, при нажатии на которую фон становился бы равномерно зеленоватым. Для пользователей, пред почитающих читать черные буквы на белом фоне, можно предусмотреть возможность смены цвета фона на белый.
Для начала в соответствии с требованиями HTML 4.0 заменим атрибуты BGCOLOR= и BACKGROUND= тега <BODY> на соответствующие стилевые свойства:
<STYLE> BODY { background-color: #BFFFBF; background-image: url("Images/gradi.jpg"); } </STYLE>Что же касается тега <BODY>, то ему желательно присвоить имя для облегчения доступа к его свойствам:
<BODY ID="doc">Теперь добавим сверху две кнопки: одну для выключения фонового рисунка, а другую – для смены цвета фона на белый:
<DIV ALIGN="center"> <INPUT TYPE="button" VALUE="Убрать фоновый рисунок"> <INPUT TYPE="button" VALUE="Сделать фон белым"></DIV>Кнопки созданы, но пока при их нажатии ничего не происходит. Нам надо написать функцию, убирающую фоновый рисунок. Для этого нужно всего лишь стилевому свойству background-image присвоить значение none:
function noBg() { document.all.doc.style.backgroundlmage = 'none'; }Обратите внимание на то, что в тексте на языке JavaScript (а не на языке CSS) нужно обязательно преобразовать название стилевого свойства с дефисом, как объяснялось выше.
Теперь нужно сделать так, чтобы наша функция noBg() выполнялась при щелчке мыши на первой из кнопок. Для этого надо в соответствующий тег кнопки добавить обработчик событий, реагирующий на щелчок мыши. Он называется onClick:
<INPUT TYPE="button" VALUE="убрать фоновый рисунок" onClick="noBg()">Аналогично создадим функцию для смены цвета фона на белый:
function colChange() { document.all.doc.style.backgroundColor = 'white'; }…и добавим ко второй кнопке обработчик события onClick:
<INPUT TYPE="button" VALUE="Сделать фон белым" onClick="colChange()">Если теперь открыть эту страницу в браузере, то при нажатии на кнопку Убрать фоновый рисунок градиентный фоновый перелив исчезнет, уступив место зеленоватому цвету, а при нажатии на кнопку Сделать фон белым фон страницы действительно станет белым.
Однако неплохо бы дать пользователю и возможность обратной смены цвета и включения градиента. Он, конечно, может для этого нажать в браузере кнопку Обновить, однако рассчитывать на это некорректно, да и нс всякий пользователь сразу сообразит это сделать. Поэтому давайте при выключении фонового рисунка сменим надпись на кнопке. Для этого желательно дать кнопкам имена, например вот так:
<INPUT TYPE="button" NAME="butt1" VALUE="Убрать фоновый рисунок" onClick="noBg()"><INPUT TYPE="button" NAME="butt2" VALUE="Сделать фон белым" onClick="colChange()">Можно было, разумеется, использовать и атрибут ID= вместо NAME=. Для того чтобы изменить надпись на первой кнопке, достаточно изменить значение ее атрибута VALUE=:
document.all.butti.value = 'Вернуть фоновый рисунок';Теперь давайте подумаем, как нам переделать функцию noBg(). Ведь она должна убирать фоновый рисунок, если он есть, и включать его, если его нет. Одновременно нужно соответствующим образом изменять надпись на кнопке. Следовательно, нужно сначала проверить, есть ли фоновый рисунок:
function noBg() { if (document.all.doc.style.backgroundlmage = "none") { document.all.doc.style.backgroundlmage = 'none'; document.all.butti.value = 'Вернуть фоновый рисунок'; } else { document.all.doc.style.backgroundlmage = "url('Images/gradi.jpg')"; document.all.butti.value = 'Убрать фоновый рисунок'; } }