Фильтры изображений

Работает только в Internet Explorer!

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

Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являются окнами, как, например, элемент <IFRAME>.

Элементы, к которым можно применять фильтры

  • BODY
  • BUTTON
  • DIV. Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
  • IMG
  • INPUT
  • MARQUEE
  • SPAN. Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
  • TABLE
  • TD
  • TEXTAREA
  • TH

    Чтобы применить фильтр к элементу, нужно задать значение его свойства filter в форме функции:

    filter: имя_фильтра([параметры]);

    Фильтры, реализованные в Internet Explorer

  • Alpha. Устанавливает уровень непрозрачности объекта.

    Синтаксис:

    filter:Alpha(Opacity=0-100, FinishOpacity=0-100, Style=0|1|2|3, StartX=pixels, StartY=pixels, FinishX=pixels, FinishY=pixels)

    где:

    Атрибут Описание
    Style 0 - Uniform
    1 - Linear
    2 - Radial
    3 - Rectangular
    регулирует стиль градиента
    Opacity Начальный уровень прозрачности в процентах
    FinishOpacity Конечный уровень прозрачности в процентах
    StartX Начальная координата по Х для градиента Linear
    StartY Начальная координата по Y для градиента Linear
    FinishX Конечная координата по Х для градиента Linear
    FinishY Конечная координата по Y для градиента Linear
    <DIV ID="AlphaId"
    STYLE="width:320; height:240;
    	filter:Alpha(Opacity=50, FinishOpacity=100,
    	Style=0, StartX=0, StartY=0, FinishX=320, FinishY=240)">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    
    Opacity: FinishOpacity:
    Style:
    StartX StartY:
    FinishX: FinishY:

  • BlendTrans. Увеличивает или уменьшает контрастность отображения объекта.

  • Blur. Создает эффект смазанного изображения.

    Синтаксис:

    filter:Blur(Add=true|false, Direction=0|45|90|135|180|225|270|315, Strength=pixels)

    где:

    Атрибут Описание
    Add принимает значение true или false
    Direction устанавливает направление смазывания
    0 - Вверх
    45 - Вверх и вправо
    90 - Вправо
    135 - Вниз и вправо
    180 - Вниз
    225 - Вниз и влево
    270 - Влево
    315 - Вверх и влево
    Strength количество пикселей, на которые будет распространяться смазывание
    <DIV ID="BlurId" STYLE="width:320; height:240;
    	filter:Blur(Add=true, Direction=45, Strength=50)">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    
    Add: Strength:
    Direction:

  • Chroma. Делает прозрачными пикселы заданного цвета.

    Синтаксис:

    filter:Chroma(Color=color)

    где:

    Атрибут Описание
    Color любой именованный цвет или заданный как #RRGGBB
    <DIV ID="ChromaId" STYLE="width:320; height:320;
    	filter:Chroma(Color=#FFFFFF)">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="320"></DIV>
    
    Color: RR: GG: BB:

  • DropShadow. Рисует сплошной силуэт объекта, смещенный в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на нее тень.

    Синтаксис:

    filter:DropShadow(Color=color, OffX=pixels, OffY=pixels, Positive=true|false)

    где:

    Атрибут Описание
    Color цвет тени, любой именованный цвет или заданный как #RRGGBB
    OffX смещение тени по Х
    OffY смещение тени по Y
    Positive принимает значение true или false
    <DIV ID="DropShadowId" STYLE="width:320; height:50; font-size:32pt;
    	filter:DropShadow(Color=#CCCCCC, OffX=10, OffY=10,
    		Positive=true)">
    <CENTER>DHTML</CENTER></DIV>
    
    DHTML
    Color: RR: GG: BB:
    OffX: OffY:
    Positive:

  • FlipH. Рисует объект в зеркальном отображении относительно горизонтальной плоскости.

    Синтаксис:

    filter:FlipH()

  • FlipV. Рисует объект в зеркальном отображении относительно вертикальной плоскости.

    Синтаксис:

    filter:FlipV()

    <DIV ID="FlipId" STYLE="width:320; height:50; font-size:32pt;
    	filter:FlipV() FlipH();">
    <CENTER>DHTML</CENTER></DIV>
    
    DHTML
    FlipH: FlipV:

  • Glow. Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта.

    Синтаксис:

    filter:Glow(Color=color, Strength=1-255)

    где:

    Атрибут Описание
    Color цвет свечения, любой именованный цвет или заданный как #RRGGBB
    Strength интенсивность свечения
    <DIV ID="GlowId" STYLE="width:320; height:50; font-size:32pt;
    	filter:Glow(Color=#CC66CC, Strength=10)">
    <CENTER>DHTML</CENTER></DIV>
    
    DHTML
    Color: RR: GG: BB:
    Strength: (1-255)

  • Gray. Удаляет цветовую гамму объекта и отображает его в серых тонах.

    Синтаксис:

    filter:Gray()

    <DIV ID="GrayId" STYLE="width:320; height:240;
    	filter:Gray()">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    
    Gray:

  • Invert. Меняет оттенок, насыщение и яркость объекта на противоположные.

    Синтаксис:

    filter:Invert()

    <DIV ID="InvertId" STYLE="width:320; height:240;
    	filter:Invert()">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    
    Invert:

  • Light. Подсвечивает объект. Является очень специфическим фильтром, так как простое его применение делает объект черным.

    Синтаксис:

    filter:light()

    <DIV ID="lightId" STYLE="width:320; height:240; filter:light()">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    

    Чтобы применить фильтр Light, нужно воспользоваться одним из следующих методов:

    AddAmbient(R,G,B,strength). Добавляет "окружающий" источник света к изображению. Этот вид света является не направленным и освещает все изображение.

    Синтаксис: object.filters.light.addAmbient(R,G,B,strength),

    где R, G и B значения от 0 до 255 определяющие цвет света и strength значение, определяющее количество света, то есть его силу.

    Пример:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    function addAmbient(){
    	ex1.filters.light.addAmbient(255,200,50,100)
    }
    </SCRIPT>
    
    <DIV ID="ex1" STYLE="width:180; height:120; filter:light()">
    <img src="image.jpg" width="180" height="120" border="0">
    </DIV>
    <form>
    <input type="Button" value="Применить" onclick="addAmbient()">
    </form>
    

    AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread). Добавляет "конусообразный" источник света к изображению. Этот вид света является направленным и освещает только определенный участок изображения.

    Синтаксис: object.filters.light.addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread),

    где x1, y1, z1 устанавливают положение источника света, x2 и y2 устанавливают координаты, которых достигает свет, R, G и B значения от 0 до 255 определяющие цвет света, strength значение определяющее количество света, и spread определяет угол распространения (от 0 до 90 градусов).

    Пример:

    Код:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    function addCone(){
    	ex2.filters.light.addCone(1,1,1,150,100,50,100,50,100,25)
    	}
    </SCRIPT>
    
    <DIV ID="ex2" STYLE="width:180; height:120; filter:light()">
    <img src="image.jpg" width="180" height="120" border="0">
    </DIV>
    <form>
    <input type="Button" value="Применить" onclick="addCone()">
    </form>
    

    AddPoint(x,y,z,R,G,B,strength). Добавляет "точечный" источник света к изображению.

    Синтаксис: object.filters.light.addPoint(x,y,z,R,G,B,strength),

    где x, y и z (чем больше z, тем больше диаметр точки) устанавливают координаты источника света, R, G и B значения от 0 до 255 определяющие цвет света, strength значение определяющее количество света.

    Пример:

    Код:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    function addPoint(){
    	ex3.filters.light.addPoint(90,60,50,200,250,100,200)
    }
    </SCRIPT>
    
    <DIV ID="ex3" STYLE="width:180; height:120; filter:light()">
    <img src="image.jpg" width="180" height="120" border="0">
    </DIV>
    <form>
    <input type="Button" value="Применить" onclick="addPoint()">
    </form>
    

  • Mask. Закрашивает прозрачные пикселы объекта заданным цветом и создаёт прозрачную маску из непрозрачных пикселов объекта.

    Синтаксис:

    filter:Mask(Color=color)

    где:

    Атрибут Описание
    Color любой именованный цвет или заданный как #RRGGBB
    <DIV>
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"
    	STYLE="position:absolute">
    <DIV ID="MaskId" STYLE="position:relative; width:320;
    	height:240; font-weight:bold; font-style:italic;
    	color: #FF0000; font-size: 32pt; 
    	filter:Mask(Color=#FFFFFF)">
    <CENTER>DHTML</CENTER>
    </DIV>
    </DIV>
    
    DHTML
    Color: RR: GG: BB:

  • Redirect. Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS Direct Animation.

  • RevealTrans. Показывает или скрывает объекты, используя 23 определeнных в фильтре перехода.

  • Shadow. Рисует силуэт объекта вдоль одной из его границ в заданном направлении, создавая эффект тени.

    Синтаксис:

    filter:Shadow(Color=color, Direction=0|45|90|135|180|225|270|315)

    где:

    Атрибут Описание
    Color любой именованный цвет или заданный как #RRGGBB
    Direction устанавливает направление тени
    0 - Вверх
    45 - Вверх и вправо
    90 - Вправо
    135 - Вниз и вправо
    180 - Вниз
    225 - Вниз и влево
    270 - Влево
    315 - Вверх и влево
    <DIV ID="ShadowId" STYLE="width:320; height:50; font-size:32pt;
    	filter:Shadow(Color=#CCCCCC, Direction=135)">
    <CENTER>DHTML</CENTER></DIV>
    
    DHTML
    Color: RR: GG: BB:
    Direction:

  • Wave. Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности.

    Синтаксис:

    filter:Wave(Add=true|false, Freq=number, LightStrength=0-100, Phase=0-100, Strength=0-255)

    где:

    Атрибут Описание
    Add принимает значения true или false
    Freq частота искривлений
    LightStrength интенсивность света
    Phase точка начала искривлений
    Strength сила искривлений
    <DIV ID="WaveId" STYLE="width:320; height:240;
    	filter:Wave(Add=false, Freq=2, LightStrength=10,
    		Phase=0, Strength=10)">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>
    
    Add: Freq:

    LightStrength: Phase:
    Strength:

  • Xray. Изменяет глубину цвета объекта и после этого отображает его в черно-белых тонах, имитируя рентгеновский снимок объекта.

    Синтаксис:

    filter:Xray()

    <DIV ID="XrayId" STYLE="width:320; height:240; filter:Xray()">
    <IMG src="image.jpg" WIDTH="320" HEIGHT="240">
    </DIV>
    

    Xray:

    Читать дальше: Динамические фильтры в HTML


    .
  • Популярное:


    Содержание:


    Новое за неделю



    Сейчас на сайте: 3930

    Rambler's Top100