Урок 13. Цветовые эффекты

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

Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. При удалении указателя с кнопки должен вернуться ее первоначальный цвет.

В нашем примере три элемента-кнопки находятся в контейнере формы FORM. К этому контейнеру привязываются обработчики событий onmouseover (наведение указателя мыши на объект) и onmouseout (сведение указателя мыши с объекта).

В функции colorchange() проверяется, является ли инициатор события объектом типа button (кнопка). Если это так, то цвет кнопки изменяется, в противном случае - нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона.

<html>
	<head>
		<style>
			.color_but {font-weight: bold; background-color: #a0a0a0;}
		</style>
		<script>
			function colorchange(color) {
				if (event.srcElement.type == "button")
					event.srcElement.style.backgroundColor=color;
			}
		</script>
	</head>
	<body>
		<form onmouseover="colorchange('yellow')" onmouseout="colorchange('#a0a0a0')">
			<input type="button" value="One" class="color_but">
			<input type="button" value="Two" class="color_but">
			<input type="button" value="Three" class="color_but">
		</form>
	</body>
</html>

Аналогичным образом можно изменять цвет и других элементов, например фрагментов текста. Если требуется подсвечивать текст, то он должен быть заключен в какой-нибудь контейнер, например в теги P, B, I или DIV.

<html>
	<head>
		<script>
			function colorch(color) {
				event.srcElement.style.color=color;
			}
		</script>
	</head>
	<body>
		<p>
			Этот <b onmouseover="colorch('red')" onmouseout="colorch('blue')">жирный текст</b> при наведении на него указателя мыши изменяет цвет.
		</p>
	</body>
</html>

Мигающая рамка

Вы можете создать прямоугольную рамку, окаймляющую некий текст, которая периодически изменяет цвет. Рамка создается тегами одноячеечной таблицы с заданием нужных атрибутов и параметров стиля. Далее необходимо создать функцию, изменяющую цвет рамки таблицы на другой, и передать ее в качестве первого параметра методу setInterval(). Второй параметр этого метода задает период в миллисекундах, с которым вызывается функция, указанная в первом параметре.

<html>
	<head>
		<script>
			function flash() {
				if (!document.all) return null;
				if (tab.style.borderColor=='yellow')
					tab.style.borderColor=='red'
				else
					tab.style.borderColor=='yellow'
			}
		</script>
	</head>
	<body>
		<table id="tab" border="1" width="150" style="border:10 solid:yellow">
			<tr>
				<td>Мигающая рамка</td>
			</tr>
		</table>
		<script>
			setInterval("flash()", 500);
		</script>
	</body>
</html>

Переливающиеся цветами ссылки

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

<html>
	<head>
		<script>
			a_link = new Array() // массив цветов неиспользованных ссылок
			a_link[0] = 'yellow'
			a_link[1] = '#80ff80'
			a_link[2] = '#ffff80'
			a_link[3] = '#408000'
 
			a_vlink = new Array() // массив цветов использованных ссылок
			a_vlink[0] = 'blue'
			a_vlink[1] = 'purple'
			a_vlink[2] = 'black'
			a_vlink[3] = 'red'
 
			function colorch() {
				alink=Math.round((a_link.length+0.1)*Math.random())
				vlink=Math.round((a_vlink.length+0.1)*Math.random())
				document.linkColor = a_link[alink]
				document.linkColor = v_link[vlink]
			}
		</script>
	</head>
	<body>
		<ul>
			<li><a href="http://younglinux.info">Уроки по СПО</a></li>
			<li><a href="http://inf1.info">Информатика</a></li>
			<li><a href="http://pas1.ru">Pascal</a></li>
		</ul>
		<script>
			setInterval("colorch()",500)
		</script>
	</body>
</html>

Вопросы и задания

  1. Сколько массивов используется в данном сценарии?
  2. Для чего служит функция colorchange()?
  3. Для чего служит метод setInterval()?