Сайт посвященный WEB Дизайну
Статьи по:





Rambler's Top100

Этот сайт приносит прибыль с помощью Бегуна

Закажи рекламу на Rambler.ru, Mail.ru, Aport.ru! От 5 долларов за все!

JavaScript: Простые визуальные эффекты

Подсветка кнопок и текста

Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это так называемая подсветка кнопок. Сразу займемся общим случаем нескольких кнопок. В нашем примере три элемента, задающие кнопки, находятся в контейнере формы <FORM> К этому контейнеру привязываются обработчики событий onmouseover (наведение указателя мыши) и onmouseout (удаление указателя мыши). Таким образом, инициатором (получателем) этих событий может быть любой элемент формы (в нашем примере — любая из трех кнопок).

<STYLE>
mystyle {font-weight:bold ; background-color:#cccccc}
</STYLE>
<FORM onmouseover = "colorchange('yellow' )" onmouseout ="colorchange('#cccccc')">
<INPUT TYPE=button VALUE="Первая" CLASS = "mystyle" onclick =
"alert('Bbi нажали кнопку')">
<INPUT TYPE = "BUTTON" VALUE = "Вторая" CLASS = "mystyle" onclick =
"alert('Bbi нажали кнопку 2')">
<INPUT TYPE = "BUTTON" VALUE = "Третья" CLASS = "mystyle" onclick =
"alert('Bbi нажали кнопку 3')">
</FORM>
<SCRIPT>
function colorchange(color){ // изменение цвета кнопок
if (event.srcElement.type == "button")
event.srcElement.style.backgroundColor=color;
}
</SCRIPT>

Ниже приведен пример работы


Здесь в функции colorchange() проверяется, является ли инициатор события объектом типа button (кнопка). Если это так, то цвет кнопки изменяется, в противном случае — нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона. Аналогичным образом можно изменять цвет и других элементов, например фрагментов текста. Если требуется подсвечивать текст, то он должен быть заключен в какой-нибудь контейнер, например в теги <Р>, <В>, <I> или <DIV>. В следующем примере цвет текста, заключенного в тег <В>, изменяется с синего на красный при наведении на него указателя мыши:

<HTML>
Этот <В onmouseove r= "colorch('red')" onmouseout = "colorch('blue')"
style="color: red;">
Жирный текст
</В>
при наведении на него указателя мыши
изменяет цвет
<SCRIPT>
function colorch(color){
event.srcElement.style.color = color
}
</SCRIPT>
</HTML>
Hosted by uCoz