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

Лабораторная работа 6

Суть смены изображений заключается в том, чтобы с помощью сценария изменить значение атрибута SRC тега < IMG>. Атрибут SRC имеет в качестве значения строку, указывающую месторасположение графического файла. Если элемент < IMG>, задающий изображение, содержится в HTML-документе, то в объектной модели имеется объект этого элемента со свойством src. Значение этого свойства можно изменить в сценарии. При этом в окно браузера загружается соответствующий графический файл.

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

Пусть на веб-странице расположена галерея миниатюр. Нужно, чтобы при щелчке кнопкой мыши на миниатюре она увеличивалась, а затем при щелчке на увеличенном изображении уменьшалась. Для решения этой задачи потребуется столько флагов, сколько имеется изображений. Флаги определяются как массив, каждый элемент которого будет соответствовать отдельному изображению. Далее создается функция-обработчик, которая определяет, на каком именно изображении произошел щелчок.

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

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

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

Привлечь внимание посетителей к ссылкам на веб-странице можно с помощью эффекта динамического изменения их цвета. Суть задачи состоит в том, чтобы случайным образом выбирать и устанавливать цвет ссылок. В листинге 7 множества цветов, из которых происходит выбор, различаются для уже использованных и еще не использованных ссылок. Эти множества цветов задаются в виде массивов. В результате вставки этого сценария в HTML-документ все ссылки документа начинают переливаться разными цветами, поскольку изменяются свойства HnkColor и vlinkColor объекта document.

Объемные (выпуклые) заголовки довольно эффектны на веб-страницах. Зачастую они создаются как графические файлы, которые вставляются в HTML-документ с помощью тега < IMG>. Однако во многих случаях более экономичным является решение, основанное на использовании таблиц стилей. Идея создания объемного заголовка довольно проста: достаточно несколько надписей с одинаковым содержанием наложить друг на друга с некоторым сдвигом по координатам. Потребуются как минимум две такие надписи. Одна из них предназначена для создания эффекта тени (задний план), а вторая располагается над первой. Можно использовать еще одну такую надпись для создания эффекта подсветки. С эстетической точки зрения наилучший эффект достигается путем подбора цветов надписей (игрой света и тени) с учетом цвета фона. С технической точки зрения нужный эффект получается с применением таблиц стилей. В листинге 9 приведен пример HTML-документа, в котором объемный заголовок создается с помощью трех наложенных друг на друга надписей. Таблица стилей определяется для тега абзаца < Р>. В данной таблице задаются цвет и параметры шрифта надписей. Позиционирование надписей производится параметрами атрибута STYLE контейнерных тегов < DIV>, в которые заключены теги абзаца.

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

Рассмотрим пример, в котором к графическому изображению применяется фильтр alpha, параметр opacity (степень прозрачности) которого изменяется периодически по синусоидальному закону. В результате изображение сначала постепенно появляется, а затем постепенно исчезает; после этого все повторяется снова. Функция fimg () изменяет значение opacity фильтра alpha по закону . Эта функция передается в качестве параметра методу setInterval (), который вызывает ее с периодом 300 мс.

Интересный визуальный эффект получается при использовании фильтра light, имитирующего направленный источник света. Чтобы создать луч света, необходимо применить метод addCone () к заданному фильтру light. Мы не можем изменить параметры метода после его применения. Поэтому чтобы изменить луча света, следует сначала удалить фильтр light, а затем снова его создать и применить к нему метод addCone () с новыми параметрами. В следующем примере графическое изображение подсвечивается источником света. Кроме того, добавлен направленный источник света, создающий конический луч. Щелчок мышью на изображении изменяет направление луча в сторону щелчка. Для этого используются координаты щелчка – window.event.clientX и window.event.clientY.

Постепенный вывод на страницу текста (эффект печати на пишущей машинке) можно создать на основе использования метода setInterval (). Ниже приводится HTML-документ с заголовком и текстовой областью, задаваемой тегом < TEXTAREA >. Сценарий в этом документе выводит в текстовую область символы некоторой строки с задержкой 0, 1 с. После завершения вывода всей строки этот процесс останавливается. Функция wrtext () формирует строку, которую требуется вывести в текстовой области в данный момент. Вывод производится путем присвоения значения свойству value текстовой области. Функция wrtext () передается в виде строкового параметра методу setInterval (), который и вызывает ее периодически с интервалом, указанным в миллисекундах, в качестве второго параметра. В примере этот интервал равен 100. Метод setInterval () возвращает целочисленный идентификатор запущенного процесса, сохраняется в переменной xinterval. Это значение передается методу clearInterval () как параметр, чтобы завершить процесс периодического вызова функции wrtext (), когда «напечатается» вся строка.