Онлайн учебник по HTML и JAVASCRIPT

Элементы языков HTML и JAVASCRIPT

       

Примеры скриптов: Подсветка кнопок

В следующем примере на странице располагаются три кнопки серого цвета. При наведении указателя мыши на кнопку ее цвет изменяется на желтый. Здесь мы использовали стиль, чтобы задать первоначальный цвет кнопок и «вес» шрифта. При возникновении события функция changecolor (color) изменяет один из параметров стиля, а именно цвет фона backgroundColor. Цвет, который следует установить, передается функции в качестве параметра.

<HTML>
<STYLE>
.mystyle (font-weight:bold;background-color:aOaOaO}
</STYLE>
<FORM onMouseOver="changecolor('yellow')"
onMouseOut="changecolor('aOaOaO')">
<INPUT TYPE="button" VALUE="Pora" CLASS="mystyle"
onClick="alert('Вы нажали Рога')">
<INPUT TYPE="button" VALUE="Kопыта" CLASS="mystyle"
onClick="alert('Вы нажали Копыта')">
<INPUT TYPE="button" VALUE= "Хвосты" CLASS="mystyle"
onClick="alert('Вы нажали Хвосты')">
</FORM>
<SCRIPT>
function changecolor (color) // изменение цвета кнопок
{
event.srcElement.style.backgroundedоr = color;
}
</SCRIPT>
</HTML>

В данном примере мы воспользовались объектом event, который содержит информацию о каком-либо событии (в нашем случае — о щелчке). Свойство srcElement этого объекта содержит информацию об элементе страницы, с которым связано событие (в нашем случае это какая-то кнопка). Мы хотим изменить параметр background, относящийся не непосредственно к кнопке, а к ее стилю (style). Именно поэтому мы изменяем значение свойства event.srcElement.style.backgroundColor.

Мы рассмотрели не единственный возможный способ организации подсветки кнопок. В примере мы хотели обратить ваше внимание на то, что можно изменять параметры, определенные ранее тегом или атрибутом STYLE.

 

 

 

Top.Mail.Ru
Top.Mail.Ru