Примеры скриптов
Подсветка кнопок
В следующем примере на странице располагаются три кнопки серого цвета. При наведении указателя мыши на кнопку ее цвет изменяется на желтый. Здесь мы использовали стиль, чтобы задать первоначальный цвет кнопок и "вес" шрифта. При возникновении события функция changecolor (color) изменяет один из параметров стиля, а именно цвет фона backgroundColor. Цвет, который следует установить, передается функции в качестве параметра.
<HTML><STYLE> .mystyle (font-weight:bold; background-color:a0a0a0 } </STYLE><FORM onMouseOver="changecolor('yellow')" onMouseOut="changecolor('a0a0a0')"> <INPUT TYPE="button" VALUE="Рога" CLASS="mystyle" onClick="alert('Вы нажали Рога')"> <INPUT TYPE="button" VALUE="Копыта" CLASS="mystyle" onClick="alert('Вы нажали Копыта')"> <INPUT TYPE="button" VALUE="Хвосты" CLASS="mystyle" onClick="alert('Вы нажали Хвосты')"></FORM><SCRIPT> function changecolor(color) { // изменение цвета кнопок event.srcElement.style.backgroundcolor = color; } </SCRIPT> </HTML>В данном примере мы воспользовались объектом event, который содержит информацию о каком-либо событии (в нашем случае – о щелчке). Свойство srcElement этого объекта содержит информацию об элементе страницы, с которым связано событие (в нашем случае это какая-то кнопка). Мы хотим изменить параметр background, относящийся не непосредственно к кнопке, а к ее стилю (style). Именно поэтому мы изменяем значение свойства event.srcElement.style.backgroundColor.
Мы рассмотрели не единственный возможный способ организации подсветки кнопок. В примере мы хотели обратить ваше внимание на то, что можно изменять параметры, определенные ранее тэгом или атрибутом STYLE.
Мигание
В этом примере мы создаем с помощью тэга таблицы рамку, окаймляющую текст. С помощью скрипта цвет рамки будет периодически изменяться, создавая эффект мигания.
<HTML><TABLE BORDER=1 WIDTH=180 ID="mytab" style="border:7px solid:yellow"> <TR> <TD>Мигающий бордюр</TD> </TR></TABLE><SCRIPT> function flash() { // изменение цвета бордюра if (!document.all) // ничего в документе нет return; if (mytab.style.borderColor == 'yellow') mytab.style.borderColor = 'red'; else mytab.style.borderColor = 'yellow'; } setlnterval("flash()", 500); // мигание бордюра с периодом 500 мс </SCRIPT> </HTML>В скрипте периодически с помощью метода setlnterval() вызывается функция flash(), которая назначает цвет рамки таблицы; setlnterval() является методом объекта window. Он принимает два параметра: функцию, которую следует периодически запускать, и число, равное периоду запусков в миллисекундах. В нашем примере функция flash() задания цвета рамки запускается через каждые 500 мс.