- •«Вычислительные машины, системы и сети»
- •Лабораторная работа №1 структура документа. Текстовые блоки и форматирование текста
- •Теоретический раздел
- •Практический раздел
- •Задание
- •Лабораторная работа №2 гиперссылки и списки
- •Теоретический раздел
- •Практический раздел
- •Задание
- •Лабораторная работа №3 работа с таблицами и графикой
- •Теоретический раздел
- •Практический раздел
- •Задание
- •Лабораторная работа №4 фреймы
- •Теоретический раздел
- •Практический раздел
- •Задание
- •Лабораторная работа №5 создание сайта в internet
- •Лабораторная работа №6 каскадные таблицы стилей
- •Теоретический раздел
- •Задание
- •Лабораторная работа №7 обработчик событий
- •Теоретический раздел
- •Задание
- •Лабораторная работа №8 html формы
- •Теоретический раздел
- •Задание
- •Лабораторная работа №9 введение в javascript
- •Теоретический раздел
- •Задание
- •Лабораторная работа №10 работа с массивами, графикой и окнами посредством javascript
- •2. Задание
- •Лабораторная работа №11 фильтры
- •Теоретический раздел
- •Задания
2. Задание
1. Создать часы
Лабораторная работа №11 фильтры
Цели работы:
познакомить с фильтрами Dhtml;
научиться внедрять фильтры в html-документ.
Теоретический раздел
Визуальные фильтры
Фильтры, описанные здесь, поддерживаются только Internet Explorer 4.0 и более поздними версиями. Версия 5.5 их также не поддерживает.
В настоящее время визуальные фильтры - расширение специфики использования листов стилей Microsoft Explorer 4.0 (в предыдущих версиях Internet Explorer они были встроены как элементы ActiveX, а рассматриваться в качестве атрибутов листов стилей стали начиная с версии 4.0)
Фильтры предоставляют возможность манипулировать отображением визуальных объектов (т.е. всего, что есть на странице), делая доступными эффекты, ранее получаемые при использовании готовой графики. При помощи скриптов фильтры динамически изменяемы без перезагрузки документа, что является главным преимуществом перед использованием готовых изображений. В основном они применяются к элементам <IMG>, однако допускается использование и с элементами <DIV> (элемент <DIV> должен быть определен атрибутами листов стилей width или heigh), которые в свою очередь могут содержать другие HTML-элементы, т.е. фактически могут применяться к любым элементам документа.
Вызов действия фильтра при переходе между страницами/сайтами Internet Explorer 4.0 также рассматривает переходы между страницами и сайтами (Inter page/site transitions) как события, вызывающие действие визуального фильтра, если заранее определить фильтр в элементе <META>. Это используется для применения transition-эффектов, которые приходят в исполнение в момент загрузки (первого открытия) или выгрузки страницы или сайта (смены хоста).
Фильтры создают стандартные эффекты blend transition, или reveal transition; синтаксис такой же как при использовании остальных визуальных фильтров - определение типа фильтра в атрибуте CONTENT элемента <META>. Например:
<META HTTP-EQUIV= "Page-Enter"CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">
Это будет случайный растворяющий фильтр, действующий в течение трех секунд с момента первого открытия страницы.
!! Когда действие фильтра вызывается событиями PAGE-ENTER, PAGE-EXIT, SITE-ENTER или SITE-EXIT, определяемыми в атрибуте HTTP-EQUIV элемента <META>, элемент <META> должен быть первым элементом в заголовке документа <HEAD>, также фильтр не будет приведен в действие при обновлении независимого фрейма.
Возможные визуальные фильтры:
Фильтр |
Описание |
Alpha |
Определяет уровень прозрачности. |
Blur |
Создает впечатление движения на высокой скорости |
Chroma |
Определенный цвет делает прозрачным |
DropShadow |
Создает сплошной силует (тень) объекта |
FlipH |
Преобразует в горизонтарьное зеркальное отображение |
FlipV |
Преобразует в вертикальное зеркальное отображение |
Glow |
Создает сияное вокруг наружного контура объекта |
Gray |
Отбрасывает информацию о цвете изображения |
Invert |
Изменяет значения цветовой гаммы, насыщенности и яркости на обратные |
Light |
Проектирует на поверхность объекта источник света |
Mask |
Преобразует изображение в маску-транспарант определенного цвета |
Shadow |
Создает компенсированный пространственный силует |
Wave |
Создает искажение по синусоиде вдоль оси X |
XRay |
Создает 'ренген-снимок' изображения. |
Основной синтаксис:
STYLE="filter:filtername(fparameter1, fparameter2...)}
где filtername - имя фильтра, а fparamter1... - представляет параметры, относящиеся к конкретному типу фильтра (они расписаны ниже относительно и каждого имени фильтра).
Фильтр alpha используется для определения уровня непрозрачности изображения, или его градиентной области.
STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"
Opacity. Уровень непрозрачности (от 0 до 100), где 0 - полная прозрачность, 100 - полная прозрачность.
FinishOpacity. Конечный уровень непрозрачности (от 0 до 100), где 0 - полная прозрачность, 100 - полная прозрачность. Присутствие этого элемента необязательно, однако оно определяет характер фильтра.
Style. Опрделяет характер области воздействия фильтра. Возможные значения:
0 (объект полностью),
1 (линейная область),
2 (радиальная область),
3 (прямоугольная область).
StartX . Начальная Х-координата области воздействия фильтра.
StartY . Начальная Y-координата области воздействия фильтра.
FinishX. Конечная Х-координата области воздействия фильтра.
FinishY. Конечная Y-координата области воздействия фильтра.
Например:
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
Фильтр blur создает впечатление движения объекта.
STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
Add. Булево значение, представляет коэффициент замутнения, целое число (0 в качестве аргумента не принимается).
Direction. Значение, определяющее направление движения размытия (от 0 до 315, увеличивающееся всегда на 45)
Strength. Целое число, определяющее глубину размытия, т.е. количество пикселей, на которое при размытии будет произведено смещение.
Например:
filter:Blur(Add="1",Direction="45",Strength="5")
Чтобы увидеть действие фильтра кликните на кнопке
Фильтр chroma делает определенный цвет объекта прозрачным.
STYLE="filter:Chroma(Color = color)"
Color
Любое шестнадцатеричное RGB-значение цвета (например: #000000). Чтобы фильтр работал правильно, это должен быть присутствующий в объекте, точно определенный цвет.
Например:
filter:Chroma(Color="#000000") (цвет рамки изображения)
Фильтр DropShadow создает сплошной силуэт объекта с отступом на определенное расстояние.
STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
Color. RGB-значение цвета, определенного для создания тени (например: #000000).
OFFX. Горизонтальное смещение тени.
OffY. Вертикальное смещение тени.
Positive. Булево значение, когда значением является целое число кроме нуля (true), создается тень непрозрачных пикселей объекта, если значение 0(false) - создается тень прозрачных пикселей.
Например:
filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
DropShadow
Чтобы увидеть действие фильтра кликните на кнопке
Фильтр FlipH переворачивает объект по горизонтали.
STYLE="filter:FlipH"
Например:
filter:FlipH
Фильтр FlipV переворачивает объект по вертикали.
STYLE="filter:FlipV"
Например:
filter:FlipV
Фильтр Glow создает сияние вокруг контура объекта.
STYLE="filter:Glow(Color=color, Strength=strength)"
Color
RGB-значения цвета сияния
Strength
Коэффициент интенсивности сияния от 0 до 100
Например:
filter :Glow(Color="#ffd700",Strength="5")
Glow
Чтобы увидеть действие фильтра кликните на кнопке
Фильтр Gray отбрасывает информацию о цвете изображения, переводя его в оттенки серого.
STYLE="filter:Gray"
Например:
filter:Gray
Фильтр Invert инвертирует изображение (изменяет значения цветовой гаммы, насыщенности и яркости на обратные).
STYLE="filter:Invert"
Например:
filter:Invert
Фильтр Light можно использовать для создания эффекта иллюминирования объекта. Чтобы использовать фильтр light необходимо определить источник света одним из следующих методов:
AddAmbient(R,G,B,strength) Добавляет на поверхность объекта окружающий источник света. Окружающий свет не направлен и освещает всю территорию. Создается эффект солнечного света. Синтаксис:
document.all.object.style.filters.Light.addAmbient(R,G,B,strength)
где R, G и B значения (от 0 до 255), устанавливающие цветовую гамму окружающего света; strength устанавливает 'силу' света.
AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) Добавляет конический источник света на поверхность объекта. Свет направленный и освещает только определенную территорию.
Синтаксис:
document.all.object.style.filters.Light.addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
где x1, y1 координаты источника света, x2 и y2 координаты освещаемой территории, R, G и B значения (от 0 до 255) определяющие цветовую гамму света, strength определяет 'силу света' и spread определяет падения (от 0 до 90, в градусах).
AddPoint(x,y,z,R,G,B,strength) Добавляет на поверхность объекта точечный источник света. Создается эффект точечного электрического освещения.
Синтаксис:
document.all.object.filters.Light.addPoint(x,y,z,R,G,B,strength);
где x, y и z координаты точечного источнока света, R, G и B значения (от 0 до 255), определяющие цветовую гамму окружающего света и strength определяет 'силу' света.
Например:
document.all.divLight.filters.Light.addPoint(10,10,100,255,255,255,1000); document.all.divLight.filters.Light.addAmbient(0,255,0,255);
на поверхность текста добавляется точечный и голубой окружающий свет.
Следующие методы также могут быть использованы:
ChangeColor(lightnumber, r,g,b, fAbsolute)
Метод ChangeColor изменяет цвет примененного светового фильтра. Для определения отдельного светового источника, цвет которого должен быть изменен используется номер lightnumber(элемент массива); r,g и b, определяют цвет, который будет изменен. fAbsoloute - булево значение: если fAbsoloute не нуль (true), то указанный цвет светового фильтра изменится на новый, определенный RGB, если нуль (false), то указанный цвет светового фильтра изменится относительно уже определенного значения RGB.
ChangeStrength(lightnumber, strength, fAbsolute)
Метод ChangeStrength изменяет значение коэффициента силы отдельного светового фильтра (указанного аргументом lightnumber) на значение, определенное элементом strength если значение элемента fAbsolute не нуль (true), или, если нуль (false) - относительно определенной суммы.
Метод Clear удаляет все источники света, созданные указанным световым фильтром.
MoveLight(lightnumber, x, y, z, fAbsolute)
Метод MoveLight передвигает источник света (для точечных источников), или освещаемую территорию (для конических источников), на окружающие световые источники эффекта не производит. Значения x, y и z, определяющие новое местоположение света, либо абсолютные (fAbsoloute=nonzero), либо относительные (fAbsolute=false).
Фильтр Mask задает всем прозрачным пикселям объекта указанный цвет, остальные пиксели преобразует в прозрачные, создавая таким образом маску-трафарет. Синтаксис:
STYLE="filter:Mask(Color=color)"
где Color цвет маски.
For example:
filter:Mask (Color="#FFFFE0")
Mask.
Чтобы увидеть действие фильтра кликните на кнопке
Фильтр shadow используется для создания тени определенного объекта. Синтаксис:
filter:Shadow(Color=color, Direction=direction)
Color . RGB-значение, определяющее цвет тени.
Direction
Угол падения тени, величиной от 0 до 315 градусов (значения угла увеличиваются через 45 градусов).
Например:
filter:Shadow (Color="#6699CC", Direction="135")
Spooky Shadows
Чтобы увидеть действие фильтра кликните на кнопке
Фильтр wave создает волновое искажение указанного объекта. Синтаксис:
filter: Wavу(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
Add. Булево значение, определяющее, будет вместе с искаженным отображаться исходный объект (true, не нуль) или нет (false, нуль).
Freq. Целое число определяющее количество волн, создающих искажение.
LightStrength. 'Сила света' при волновом эффекте как процентное отношение (0 - максимальный свет, 100 - минимальный свет).
Phase. Определяет фазу волны (угол) в процентах (т.е. 0/100% = 360 градусов, 25% = 90 градусов).
Strength. Целое число, определяющее интенсивность волнового эффекта.
Например:
filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
Фильтр xray отображает объект в виде рентген-снимка. Синтаксис:
STYLE="filter:Xray"
Например:
filter:Xray
Переходные фильтры
Здесь представлено два типа переходных фильтров (transition-фильтров), которые поддерживаются Internet Explorer 4.0: Reveal Transition и Blend Transition. Как следует из названий, фильтр Reveal Transition поддерживает различные способы отображения/сокрытия визуального объекта, фильтр Blend transition производит постепенное растворение/проявление визуального объекта.
Фильтр RevealTrans Может использоваться для любого визуального объекта, чтобы показать или скрыть его, используется множество разнообразных техник. Основной синтаксис:
STYLE="filter: revealtrans(duration=duration, transition=transitionshape)
где Duration - время, которое займет переход. Принимаются значения в формате секунды.миллисекунды например 2.1 = 2 секундам, 100 миллисекундам. Transition-эффект может быть одним из следующих:
Значение (0 - 23) |
Изображение проявляется |
0 |
Прямоугольно внутрь |
1 |
Прямоугольно наружу |
2 |
По окружности внутрь |
3 |
По окружности наружу |
4 |
Стекание вверх |
5 |
Стекание вниз |
6 |
Стекание вправо |
7 |
Стекание влево |
8 |
Вертикальные области |
9 |
Горизонтальные области |
10 |
Шахматные клетки слево направо |
11 |
Шахматные клетки сверху вниз |
12 |
Случайные точки |
13 |
Вертикально от обоих концов к центру |
14 |
Вертикано из центра |
15 |
Горизонтально от обоих концов к центру |
16 |
Горизонтально из центра |
17 |
По диагонали из правого верхнего угла к левому нижнему |
18 |
По диагонали из правого нижнего угла к левому верхнему |
19 |
По диагонали из левого верхнего угла к правому нижнему |
20 |
По диагонали из левого нижнего угла к правому верхнему |
21 |
Случайные горизонтальные штрихи |
22 |
Случайные вертикальные штрихи |
23 |
Случайный выбор эффекта (любой от 0 до 23) |
Note: Использование фильтра Reveal Transition наиболее эффективно, если определяется следующими методами:
Метод Apply служит для определения момента действия фильтра. Событие, к которому фильтр привязан в атрибуте STYLE, должно быть определено при помощи метода apply.
Метод Play приводит в исполнение указанный Reveal Transition-фильтр определенного типа, время действия которого определено атрибутом Duration. Если значение Duration отсутствует, может быть определено методом Play, который переопределяет некоторые установки фильтра.
Метод Stop используется для прекращения действия фильтра, может быть вызван в любой момент его действия. Чтобы определить состояние действия фильтра, используется свойство status (описанное ниже).
Свойства
Фильтры Reveal Transition имеют свойства status и duration. Свойство Duration отражает настоящую продолжительность действия фильтра, свойство status возвращает значение, определяемое настоящим состоянием действия фильтра ("0" = действие фильтра остановлено, "1" = transition applied, "2" = фильтр действует).
Например. В результате нажатия на кнопку (в настоящее время невидимое) изображение будет постепенно проявляться.
!! Изображение невидимо, т.к. фильтр обычно применяется для получения эффекта проявления, а не растворения изображения.
Скрипт приводится в действие нажатием кнопки:
object.filters.revealTrans.Apply(); Добавляется фильтр
object.style.visibility="visible"; Объект определяется как видимый
object.filters.revealTrans.Play(); Фильтр приводится в действие определяется фильтр, перед началом его действия, объект определяется как видимый.
Фильтр BlendTrans может быть применен к любому визуальному объекту, чтобы заставить его проявиться или исчезнуть, за определенный период времени. Синтаксис:
STYLE="filter: blendtrans(duration=duration)"
где Duration значение времени, определенного для действия фильтра. Принимаются значения в формате секунды.миллисекунды, например 2.1 = 2 секундам, 100 миллисекундам.
Например, над кнопкой находится изображение, под которое на дисплее в настоящее время не отведено места. Клик на кнопке, приведет в исполнение следующий скрипт:
object.filters.blendTrans.Apply(); Добавляется фильтр
object.style.display="inline"; Объект размещается на дисплее
object.style.visibility="" Объект определяется как видимый
object.filters.blendTrans.Play() Фильтр приводится в действие
который применит к изображению фильтр blendTrans, т.е. разместит изображение на странице, обозначит его как видимое и, в конце, создаст transition-эффект (плавное проявление изображения в течение трех секунд).