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 transitionsInternet 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:

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.

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:

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:

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:

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:

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.

After you find an appropriate page, you are invited to
your
to this massmind site! (posts will be visible only to you before review)
Just type in the box and press the Post button.
(HTML welcomed, but not the <A tag:
Instead, use the link box to link to another page.
A tutorial is availableMembers can
login
to post directly, become page editors, and be credited for their posts.

Link? Put it here:
if you want a response,
please enter your email address:
Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.