Фильтры, описанные здесь, поддерживаются только 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>. Например:
Это будет случайный растворяющий фильтр, действующий в течение трех секунд с момента первого открытия страницы.
!! Когда действие фильтра вызывается событиями PAGE-ENTER, PAGE-EXIT, SITE-ENTER или SITE-EXIT, определяемыми в атрибуте HTTP-EQUIV элемента <META>, элемент <META> должен быть первым элементом в заголовке документа <HEAD>, также фильтр не будет приведен в действие при обновлении независимого фрейма.
Возможные визуальные фильтры:
Фильтр
Описание
Alpha
Определяет уровень прозрачности.
Blur
Создает впечатление движения на высокой скорости
Chroma
Определенный цвет делает прозрачным
DropShadow
Создает сплошной силует (тень) объекта
FlipH
Преобразует в горизонтарьное зеркальное отображение
FlipV
Преобразует в вертикальное зеркальное отображение
Glow
Создает сияное вокруг наружного контура объекта
Gray
Отбрасывает информацию о цвете изображения
Invert
Изменяет значения цветовой гаммы, насыщенности и яркости на обратные
Light
Проектирует на поверхность объекта источник света
Mask
Преобразует изображение в маску-транспарант определенного цвета
где filtername - имя фильтра, а fparamter1... - представляет параметры, относящиеся к конкретному типу фильтра (они расписаны ниже относительно и каждого имени фильтра).
Фильтр alpha используется для определения уровня непрозрачности изображения, или его градиентной области.
Opacity. Уровень непрозрачности (от 0 до 100), где 0 - полная прозрачность, 100 - полная прозрачность.
FinishOpacity. Конечный уровень непрозрачности (от 0 до 100), где 0 - полная прозрачность, 100 - полная прозрачность. Присутствие этого элемента необязательно, однако оно определяет характер фильтра.
Style. Опрделяет характер области воздействия фильтра. Возможные значения:
0 (объект полностью),
1 (линейная область),
2 (радиальная область),
3 (прямоугольная область).
StartX . Начальная Х-координата области воздействия фильтра.
StartY . Начальная Y-координата области воздействия фильтра.
FinishX. Конечная Х-координата области воздействия фильтра.
FinishY. Конечная Y-координата области воздействия фильтра.
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). Чтобы фильтр работал правильно, это должен быть присутствующий в объекте, точно определенный цвет.
Color. RGB-значение цвета, определенного для создания тени (например: #000000).
OFFX. Горизонтальное смещение тени.
OffY. Вертикальное смещение тени.
Positive. Булево значение, когда значением является целое число кроме нуля (true), создается тень непрозрачных пикселей объекта, если значение 0(false) - создается тень прозрачных пикселей.
Фильтр Gray отбрасывает информацию о цвете изображения, переводя его в оттенки серого.
STYLE="filter:Gray"
Например:
filter:Gray
Фильтр Invert инвертирует изображение (изменяет значения цветовой гаммы, насыщенности и яркости на обратные).
STYLE="filter:Invert"
Например:
filter:Invert
Фильтр Light можно использовать для создания эффекта иллюминирования объекта. Чтобы использовать фильтр light необходимо определить источник света одним из следующих методов:
AddAmbient(R,G,B,strength) Добавляет на поверхность объекта окружающий источник света. Окружающий свет не направлен и освещает всю территорию. Создается эффект солнечного света. Синтаксис:
где R, G и B значения (от 0 до 255), устанавливающие цветовую гамму окружающего света; strength устанавливает 'силу' света.
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) Добавляет на поверхность объекта точечный источник света. Создается эффект точечного электрического освещения.
где x, y и z координаты точечного источнока света, R, G и B значения (от 0 до 255), определяющие цветовую гамму окружающего света и strength определяет 'силу' света.
на поверхность текста добавляется точечный и голубой окружающий свет.
function doLight(){ if (im1.style.filter=="") { im1.style.filter="Light"; document.all.im1.filters.Light.addAmbient(0,255,0,255); document.all.im1.filters.Light.addPoint(10,10,100,255,255,255,1000); } else {im1.style.filter=''} } Следующие методы также могут быть использованы:
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 градусов).
Фильтр xray отображает объект в виде рентген-снимка. Синтаксис:
STYLE="filter:Xray"
Например:
filter:Xray
Переходные фильтры
Здесь представлено два типа переходных фильтров (transition-фильтров), которые поддерживаются Internet Explorer 4.0: Reveal Transition и Blend Transition. Как следует из названий, фильтр Reveal Transition поддерживает различные способы отображения/сокрытия визуального объекта, фильтр Blend transition производит постепенное растворение/проявление визуального объекта.
Фильтр RevealTrans Может использоваться для любого визуального объекта, чтобы показать или скрыть его, используется множество разнообразных техник. Основной синтаксис:
где Duration - время, которое займет переход. Принимаются значения в формате секунды.миллисекунды например 2.1 = 2 секундам, 100 миллисекундам. Transition-эффект может быть одним из следующих:
Значение (0 - 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" = фильтр действует).
Например. В результате нажатия на кнопку (в настоящее время невидимое) изображение будет постепенно проявляться.
!! Изображение невидимо, т.к. фильтр обычно применяется для получения эффекта проявления, а не растворения изображения.
function doTrans1(){ if ( logo1.style.visibility=='hidden') { logo1.filters.revealTrans.Apply(); logo1.style.visibility='visible'; logo1.filters.revealTrans.Play();}else {logo1.filters.revealTrans.Stop(); logo1.style.visibility='hidden'; } } Скрипт приводится в действие нажатием кнопки:
object.style.visibility="visible"; Объект определяется как видимый
object.filters.revealTrans.Play(); Фильтр приводится в действие определяется фильтр, перед началом его действия, объект определяется как видимый.
Фильтр BlendTrans может быть применен к любому визуальному объекту, чтобы заставить его проявиться или исчезнуть, за определенный период времени. Синтаксис:
STYLE="filter: blendtrans(duration=duration)"
где Duration значение времени, определенного для действия фильтра. Принимаются значения в формате секунды.миллисекунды, например 2.1 = 2 секундам, 100 миллисекундам.
Например, над кнопкой находится изображение, под которое на дисплее в настоящее время не отведено места. Клик на кнопке, приведет в исполнение следующий скрипт:
object.style.display="inline"; Объект размещается на дисплее
object.style.visibility="" Объект определяется как видимый
object.filters.blendTrans.Play() Фильтр приводится в действие
который применит к изображению фильтр blendTrans, т.е. разместит изображение на странице, обозначит его как видимое и, в конце, создаст transition-эффект (плавное проявление изображения в течение трех секунд).
function doTrans2(){ if ( logo2.style.visibility=="hidden") {logo2.filters.blendTrans.Apply(); logo2.style.display="inline"; logo2.style.visibility='visible'; logo2.filters.blendTrans.Play()}else {logo2.filters.blendTrans.Stop(); logo2.style.display="none"; logo2.style.visibility='hidden'; } }
