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)"
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)"
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)"
#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)"
#rrggbb hex triplet, specifying the colour to use for the shadow
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")
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
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
glow
The Glow filter adds radiance around the object, causing it to appear to glow.
STYLE="filter:Glow(Color=color, Strength=strength)"
#rrggbb hex triplet for the colour of the glow
For example:
Pressing the button below the text causes the following filter to be applied:
filter : Glow(Color="#6699CC",Strength="5")
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.
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")
shadow
The shadow filter can be used to apply a shadow to the specified object. The syntax is:
filter:Shadow(Color=color, Direction=direction)
#rrggbb hex triplet that specifies the shadow colour
For example:
Pressing the button below the image causes the following filter to be applied:
filter:Shadow (Color="#6699CC", Direction="135")
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)
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")
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).
© 1995-1998, Stephen Le Hunte