Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!



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

Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это так называемая подсветка кнопок. Сразу займемся общим случаем нескольких кнопок. В нашем примере три элемента, задающие кнопки, находятся в контейнере формы <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>


Просмотров: 26579

  Коментарии (11)
 1 Написал(а) Семён, в 00:15 27.11.2009
Это сложно понимается.Нельзя ли проще или,если можно,видеоурок?
 2 Написал(а) Vetal, в 22:22 25.12.2009
В Mozila Firefox не работает :sigh
 3 Написал(а) Мерси, в 20:18 22.03.2010
как добавить ссылку
 4 Написал(а) golileo, в 00:58 25.05.2010
 
 
 
mystyle {font-weight:bold ; background-color:#cccccc} 
 
 
 
 
 
function colorchange(color){ // изменение цвета кнопок 
if (event.srcElement.type == "button") 
event.srcElement.style.backgroundColor=color; 

 
 
 5 Написал(а) midnight, в 17:05 05.07.2010
Проще всего внедрить в код html обработчики событий...например: 
 6 Написал(а) golileo, в 04:48 04.09.2010
проще всего на css написать и код меньше и страница будет загружаться быстрей 
 
 
a:hover {background-color: #F00;} 
 7 Написал(а) Роман, в 15:55 28.05.2011
В Mozila Firefox не работает +1
 8 Написал(а) Gabby, в 05:04 17.05.2017
I'm out of league here. Too much brain power on disyalp!
 9 Написал(а) Mikel, в 16:23 17.05.2017
Thiinnkg like that is really amazing
 10 Написал(а) Keischa, в 16:28 19.05.2017
We need a lot more intgihss like this! http://qwgwcnznt.com [url=http://uxkhaj.com]uxkhaj[/url] [link=http://wkagmygsb.com]wkagmygsb[/link]


Реклама