Visual Filters

Note : The filters described here are only supported by Internet Explorer 4.0. Strictly speaking, Visual Filters should be detailed under Style Sheets as they are applied by using Style Sheet attributes. However, currently, they are a Microsoft Internet Explorer 4.0 specific style sheets extension (in early versions of Internet Explorer 4.0, the filters were implemented as a set of ActiveX controls, only being implemented as style sheet attributes in the later preview versions of Internet Explorer 4.0

The Visual Filters provide a way for manipulating visual objects (basically, anything on a page) to provide visual effects previously only manageable by using graphics. Also, through scripting, the applied filters are dynamically changeable, without reloading the document, which gives them a major advantage over images. Most commonly, they would be applied to <IMG> elements, but can be applied to <DIV> elements, which in turn can contain any HTML, so the visual filters can be applied to virtually any content. Note that if they are applied to text blocks (wrapped in <DIV> elements, then the <DIV> element must specify width and height style sheet attributes.

Inter-page/site transitions
Internet Explorer 4.0 also supports inter-page and inter-site transitions, using a Visual Filter set in the <META> element. These can be used to set transitions that play when a page is entered (i.e. first loaded) or exited or when a site (individual sites are determined by a change in the host - i.e. http://www.htmlib.com/ and http://faq.htmlib.com/ would be considered individual sites) is entered, or exited. Any of the standard Visual Filter effects can be used with either blend or reveal transitions. The syntax is as used for other Visual Filters, setting the filter type in the CONTENT attribute of the <META> element. For example:

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

This would play a random dissolve filter, over 3 seconds when the page is first displayed.

Note : For page-enter, page-exit, site-enter and site-exit transitions to work, the <META> element specifying the filter must be the first element in the <HEAD> section of the document and inter-page transitions do not appear to work across framed documents.

The Visual filters available are:

Filter effect	Description
Alpha	Sets a uniform transparency level.
Blur	Creates the impression of moving at high speed.
Chroma	Makes a specific color transparent.
DropShadow	Creates a solid silhouette of the object.
FlipH	Creates a horizontal mirror image.
FlipV	Creates a vertical mirror image.
Glow	Adds radiance around the outside edges of the object.
Gray	Drops color information from the image.
Invert	Reverses the hue, saturation, and brightness values.
Light	Projects a light source onto an object.
Mask	Creates a transparent mask from an object.
Shadow	Creates an offset solid silhouette.
Wave	Creates a sine wave distortion along the X axis.
XRay	Shows just the edges of the object.

Internet Explorer also supports two Transition Filters (Reveal and Blend transitions) for creating effects for revealing and blending objects.

The basic syntax for applying visual filters to an object is:

STYLE="filter:filtername(fparameter1, fparameter2...)}

where filtername is the name of the filter (as in the above table) and fparamter1... represents the parameters associated with each different filter type. These are detailed below, by filter name.

alpha
The Alpha visual filter can be used to set the opacity of an object, either the whole image, or a gradient region.

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"

Opacity: Opacity level, 0-100, where 0 is transparent, 100 is fully opaque
FinishOpacity: Optional finish opacity level, 0-100, 0 is transparent, 100 is fully opaque
Style: values can be 0 (uniform), 1 (linear), 2 (radial) or 3 (rectangular)
StartX: X coordinate for start of opacity gradient
StartY: Y coordinate for start of opacity gradient
FinishX: X coordinate for finish of opacity gradient
FinishY: Y coordinate for finish of opacity gradient

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

blur
The Blur filter gives the impression that the object is moving.

STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

Add: Boolean value, any integer value adds the original object to the blurred object, '0' doesn't
Direction: 0 - 315 in increments of 45 - specifies the direction of the motion blur to be added
Strength: An integer value representing the number of pixels of 'depth' for the motion blur

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Blur(Add="1",Direction="45",Strength="5")

chroma
The Chroma filter makes a specific colour of the object transparent.

STYLE="filter:Chroma(Color = color)"

Color: Any colour (as a #rrggbb triplet). For the Chroma filter to work properly, this must be a colour used in the object

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Chroma(Color="#FFFFFF")

dropShadow
The dropShadow filter adds a solid silhouette of the object, offset in the specified direction.

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Color: A #rrggbb hex triplet, specifying the colour to use for the shadow
OffX: Horizontal offset for the shadow
OffY: Vertical offset for the shadow
Positive: A boolean value. Any nonzero integer (true) creates a shadow for non-transparent pixels in the object, '0' (false) creates a shadow for transparent pixels.

For example:

Pressing the button below the text causes the following filter to be applied:

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

DropShadow this text!

flipH
The FlipH filter flips the object horizontally

STYLE="filter:FlipH"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipH

Flip this text!

flipV
The FlipV filter flips the object vertically

STYLE="filter:FlipV"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipV

Flip this text!

glow
The Glow filter adds radiance around the object, causing it to appear to glow.

STYLE="filter:Glow(Color=color, Strength=strength)"

Color: Any #rrggbb hex triplet for the colour of the glow
Strength: Glow intensity, from 0-100

For example:

Pressing the button below the text causes the following filter to be applied:

filter : Glow(Color="#6699CC",Strength="5")

Make me glow

gray
The Gray filter drops colour information from the object, rendering it in gray scales only.

STYLE="filter:Gray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Gray

invert
The Invert filter reverses the hue, saturation and brightness of the object

STYLE="filter:Invert"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Invert

light
The Light filter can be used to make the object appear as if a light source is illuminating it. Initially, Light filters need to be applied, then have the light source specified with one of the following methods.

AddAmbient(R,G,B,strength)
Adds an ambient light source to the image. Ambient light is non-directional and lights the entire area. The sun emits ambient light. The syntax is:

call object.style.filters.Light(n).addAmbient(R,G,B,strength)

where R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
Adds a cone light source to the image. Cone light is directional and lights only a defined area. The syntax is:

call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

where x1, y1 represent the location of the source light, x2 and y2 represent the location that the light is targeted towards, R, G and B are values (0-255) to determine the light colour, strength determines the 'amount' of light cast and spread determines the angle of spread (0-90, in degrees).

AddPoint(x,y,z,R,G,B,strength)
Adds an point light source to the image. Point light is emitted by light bulbs. The syntax is:

call object.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength)

where x, y and z represent the point lights coordinates, R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

For example:

Pressing the button below the text causes the following script function to execute:

call document.all.divLight.filters.Light(0).addPoint(10,10,100,255,255,255,1000) call divLight.filters.Light(0).addAmbient(0,0,255,50)

which adds a white point light and a blue ambient light to the text.

Light me up

The following methods are also available for the Light Visual filter:

ChangeColor(lightnumber, r,g,b, fAbsolute)
The ChangeColor method will change the colour of a light filter applied to an object. Use lightnumber to identify the particular light source whose colour is to be changed (it's position in the Lights array), r,g and b, represent the new colour to be changed to and fAbsoloute is a boolean flag. If fAbsoloute is true (nonzero), then the referenced Light filter colour is changed to the new amount specified, if false (i.e. zero), then the referenced Light filter colour is changed by the specified amount.

ChangeStrength(lightnumber, strength, fAbsolute)
ChangeStrength changes the strength of the particular Light filter (referenced by the lightnumber argument) to the strength specified in strength if the fAbsolute flag is true (nonzero), or by the amount specified if it's false (zero).

Clear
The Clear method removes all light sources for the referenced Light filter.

MoveLight(lightnumber, x, y, z, fAbsolute)
The MoveLight method moves the light source (for point lights), or the target location (for cone lights) and has no effect on ambient lights. The x, y and z values represent positions to move the light to, either absolutely (fAbsoloute=nonzero) or relatively (fAbsolute=false).

mask
The Mask filter takes all the transparent pixels in a visual object, sets them to a certain colour and creates a transparent mask from the nontransparent pixels. The syntax is:

STYLE="filter:Mask(Color=color)"

where Color is the colour to be used for the mask.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Mask (Color="#FFFFE0")

Mask Me

shadow
The shadow filter can be used to apply a shadow to the specified object. The syntax is:

filter:Shadow(Color=color, Direction=direction)

Color: A #rrggbb hex triplet that specifies the shadow colour
Direction: 0-315 in 45 degree increments, specifying the direction that the shadow should be applied for.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Shadow (Color="#6699CC", Direction="135")

Spooky Shadows

wave
The wave causes sine wave distortion of the referenced object. The syntax is:

filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

Add: A Boolean value specifying whether the original object is added (true, nonzero) to the filtered object or not (false, zero)
Freq: An integer value specifying the number of waves to appear in the distortion
LightStrength: Strength of the light on the wave effect as a percentage value
Phase: Specifying the angular offset of the wave, in percentage (i.e. 0/100% = 360 degrees, 25% = 90 degrees
Strength: An integer value specifying the intensity of the wave effect

For example:

Pressing the button below the image causes the following filter to be applied:

filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

Make me Wavey

xray
The xray filter causes the object to appear as if it had been x-rayed. The syntax is:

STYLE="filter:Xray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Xray

Transition Filters
There are two types of transition filter supported by Internet Explorer 4.0, the Reveal Transition and the Blend Transition. As their names suggest, the Reveal Transition filter allows selective revealing of any visual object and the blend transition performs a fade in/out of a visual object.

RevealTrans Filter
The RevealTrans filter can be applied to any visual object, to selectively show or hide it, using a variety of different techniques. The basic syntax is:

STYLE="filter: revealtrans(duration=duration, transition=transitionshape)

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds. Transition can be any one of the following:

Value	Description
0	Box in
1	Box out
2	Circle in
3	Circle out
4	Wipe up
5	Wipe down
6	Wipe right
7	Wipe left
8	Vertical blinds
9	Horizontal blinds
10	Checkerboard across
11	Checkerboard down
12	Random dissolve
13	Split vertical in
14	Split vertical out
15	Split horizontal in
16	Split horizontal out
17	Strips left down
18	Strips left up
19	Strips right down
20	Strips right up
21	Random bars horizontal
22	Random bars vertical
23	Random effect (any of the other 23)

Note : The Reveal Transition Filter is most useful when used with the following events:

Apply
The Apply method is used to actually apply the filter. Event though it may have been specified in the STYLE attribute of the element, it still needs to be applied via the apply method.

Play
The Play method causes the referenced Reveal Transition filter to start playing. It starts the transition type, for the time specified in the Duration attribute (if no Duration argument is specified in the method. A Duration can be specified in the Play method, which will override any settings in the elements filter declaration.

Stop
The Stop method is used to stop a transition and can be called at any time while the transition is playing. To determine whether the transition is playing, use the status property (described below).

Properties
Reveal Transition filters have status and duration properties. The Duration property reflects the current duration set for the filter and status returns a value depending on the current status of the transition. "0" = transition stopped, "1" = transition applied, "2" = transition playing.

For example. Pressing the button below the (currently hidden) image below starts the random dissolve transition. The image is initially hidden, so that the filter is applied to dissolve the image into appearance, rather than dissolve it away.

The script function executed when the button is pressed is:

call logo.filters.item(0).Apply() logo.style.visibility="" call logo.filters.item(0).Play()

which applies the filter, then resets the images visibility before playing the dissolve transition.

BlendTrans Filter
The BlendTrans filter can be applied to any visual object, to fade it in or out, over a certain time period. The basic syntax is:

STYLE="filter: blendtrans(duration=duration)"

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds.

For example, below there is an image above the button that's not displayed yet. When the button is clicked, the following script function is executed:

call logo2.filters.item(0).Apply() logo2.style.display="inline" logo2.style.visibility="" call logo2.filters.item(0).Play()

which applies the blendTrans filter on the image, sets it to display as an 'in-line' element, makes it visible and finally, plays the transition (causing it to blend in over a 3 second period).

file: /Techref/language/html/ib/Dynamic_HTML/dfilt.htm, 29KB, , updated: 2004/3/1 15:47, local time: 2024/11/30 22:16,

^{18.117.78.215:LOG IN}

©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?

Please DO link to this page! Digg it! / MAKE!

<A HREF="http://sxlist.com/TECHREF/language/html/ib/Dynamic_HTML/dfilt.htm"> Visual Filters</A>

Did you find what you needed?

Welcome to sxlist.com!

Site supported by
sales, advertizing,
& kind contributors
just like you!
Please don't rip/copy
(here's why
Copies of the site on CD
are available at minimal cost.