Filters and Transitions


		Contents Index Topic Contents
	Previous Topic: Positioning Next Topic: Visual and Transition Filters Reference

Filters and Transitions

With the introduction of Microsoft® Internet Explorer 4.0, Web page authors now can apply multimedia-style effects to their content through the use of visual filters and transitions. These effects are implemented in Web pages using a Cascading Style Sheets (CSS) attribute. Visual filters and transitions can be applied to standard HTML controls, such as text containers, images, and any other windowless object. Transitions are time-varying filters that can create a transition from one visual state to another. By combining filters and transitions with basic scripting, authors have a powerful tool for creating visually engaging and interactive documents.
Creating Multimedia Effects with Visual Filters and Transitions

Defining Visual Filters

Scripting Filters

Migrating from OBJECT-based Filters

Filter Design Considerations

Visual Filter Scenarios

Transitions

Interpage Transitions

Transition Design Considerations

Transition Scenarios

Visual and Transition Filters Reference

Visual Filter Effects Reference

Properties, Methods, and Events Reference

Creating Multimedia Effects with Visual Filters and Transitions

Visual filters are extensions to Internet Explorer 4.0 behavior that create onscreen effects in a document's contents. In some cases, filter effects are little more than prepackaged behavior that could have been done otherwise as script. In other cases, they go far beyond script and modify the rendered appearance of a control. Using visual filters greatly simplifies the task of incorporating sophisticated effects in Web documents.
Filters are applied to HTML controls through the filter style sheet property. The filter property is a string of filter descriptions that uses a function-like notation but does not require any knowledge of scripting. The syntax for a filter property in a style attribute is:
filter:filtername(parameters)
Here's an example of how filters are written as style attributes.
<img id=sample src="sample.jpg" style="filter:blur(strength=50) flipv()">
The sample HTML above attaches two filters to the IMG control. The first causes the image to blur over a specified number of pixels. The second filter flips the image vertically.
Each filter can have a set of optional parameters to define the precise nature of the effect, such as color or duration of behavior. Some filters, such as FlipV and FlipH for vertical and horizontal mirror images, have no parameters (although all filters and transitions have an enabled property, and all transitions have a Duration property). Multiple filters can be applied so that in the above example the "flipv" and "blur" filters are applied in combination to the IMG.
Filters often create effects that can also be generated with script. This raises the question, "Why use filters if script can do the job?" There are several reasons for using filters. Probably the most important is because they don't require script. For better or for worse, many HTML authors shy away (or are kept away) from scripting. Filters are a convenient package for the same functionality that scripting can provide. Another benefit of filters over script is that because they use the declarative and inherited syntax of CSS, they are easier to author and can be applied to entire classes of elements.
Another reason for using filters is because they provide a good downlevel story. Browsers that don't support the filter property or even style sheets simply ignore them. Even browsers that do support the filter property can do so in totally different ways without affecting the author. For instance, while filters in Internet Explorer 4.0 are implemented as special COM objects and can be easily extended, it is likely that the Windows® 3.1 implementation will be built in and represent a subset of the Internet Explorer 4.0 functionality.
Although all the filters that ship with Internet Explorer 4.0 are "visual," it is not a requirement. An example of a nonvisual filter would be a filter that changed various style sheet attributes (such as color, font size, bold, and even position) on the filtered element. These filters can be applied to any element (not just controls).
What Are HTML Controls?

Visual filters can be applied only to HTML elements that are controls. A control element defines a rectangular space within a browser window when the browser renders the Web document. Controls cannot be windowed, such as an IFRAME. Valid HTML controls are:

BODY
BUTTON
DIV (with a defined height, width, or absolute positioning)
IMG
INPUT
MARQUEE
SPAN (with a defined height, width, or absolute positioning)
TABLE
TD
TEXTAREA
TFOOT
TH
THEAD
TR

Windowless controls, such as structured graphics and ActiveX™ Controls, can also apply filter attributes. Filters follow the standard CSS attribute inheritance scheme (if it exists for the object) except for the exceptions noted below.
Filters are ignored for any positioned elements nested inside nonpositioned elements, such as a positioned SPAN inside a nonpositioned DIV. The simple solution is to always position or define a width for your outermost element.
Elements and windowed objects that cannot have filters applied to them include Java™ applets, IFRAME, the SELECT and OPTION form elements, P paragraph elements, Hn headings, and EM and STRONG logical text style elements.
Defining Visual Filters

Visual filters modify the appearance of a control. In fact, they can totally take over the visual output of a control when applying their effect. A good example of a visual filter is the alpha filter. It blends its target into the background. The author controls the amount of blend (or opacity). Opacity is expressed as a percentage. For example, the following HTML causes the image to be 20 percent opaque:
<img id=sample src=sample.jpg style="filter:alpha(opacity=20)">
Internet Explorer 4.0 supports a range of visual filters, shown in the following table, from the aforementioned alpha blend to a light filter that simulates colored lights shining on the control.

Filter effect Description

Alpha Sets a transparency level.

Blur Creates the impression of moving at high speed.

Chroma Makes a specific color transparent.

Drop Shadow Creates an offset solid silhouette.

FlipH Creates a horizontal mirror image.

FlipV Creates a vertical mirror image.

Glow Adds radiance around the outside edges of the object.

Grayscale Drops color information from the image.

Invert Reverses the hue, saturation, and brightness values.

Light Projects light sources onto an object.

Mask Creates a transparent mask from an object.

Shadow Creates a solid silhouette of the object.

Wave Creates a sine wave distortion along the x-axis and y-axis.

XRay Shows just the edges of the object.

To experiment with filters use the following samples provided with the Internet Client SDK. Filters Wizard
Wave Filter Wizard
Scripting Filters

A filters collection is available on every element to provide script with access to their individual filters. The collection can be accessed like any other object model collection. For example, the following line of script addresses the first filter in the collection of filters on the element with id=theDiv.
theDiv.filters.item(0).enabled = true;
Filters are considered sub-objects of the control to which they are attached. Like other objects, they expose properties and methods for changing their internal state. Like other object model collections, the filters collection supports several kinds of access.
<img id=sample src="sample.jpg" style="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10); position: relative">
<script language="JavaScript">
function foo()
{
sample.filters.alpha        // sub object
sample.filters["alpha"]    // named index
sample.filters[0]              // numeric index
}
</SCRIPT>
The numeric access is particularly useful when more than one filter of the same type is applied or when the type of filter isn't known in advance (if it is set through script or data binding, for instance). This is particularly important for filters and transitions that have common properties and methods such as Amount, Color, and Play.
In the following example, the opacity of a control is dynamically changed by changing the opacity property on the alpha filter.
<img id=sample src=sample.jpg style="filter: alpha(opacity=50)">
<script language="javascript">
function foo()
{
     sample.filters.alpha.opacity += 10;
}
This same syntax can be used to call the methods needed to make the transition revealTrans work in the following example.
<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script language="JavaScript">
mydiv.filters.revealTrans.apply()
mydiv.innerText = "This is different text"
mydiv.filters.revealTrans.play()
</script>
Alternately, revealTrans can be accessed by index.
<script language="JavaScript">
mydiv.filters[1].apply()
mydiv.innerText = "This is different text"
mydiv.filters[1].play()
</script>
The Filter String

The style object also has a filter property. This is a read/write string that can be used to manipulate the CSS filters of an element directly. For instance, using the DIV defined above, the following code:
<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
alert(mydiv.style.filter)
...
</script>
Would produce an alert with the following string:
wave(strength=100) revealTrans(transition=3 duration=4)
Writing to this property is especially useful to change an element's filters dynamically. Note that writing to this property overwrites the existing value and the browser renders the new string immediately. The following example adds a FlipH filter to a collection on the fly.
<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
mydiv.style.filter = mydiv.style.filter +  " fliph()"
...
</script>
After the change, the new filter string would now look like this:
wave(strength=100) revealTrans(transition=3 duration=4) fliph()
Any additional changes to that collection's filter string will modify the new string. For complex filter manipulation, authors need to keep track of the current states of their element filter collections.
Note It is strongly recommended that CSS filters be accessed through the object model whenever possible, and the filter string be accessed only under special circumstances where object model functionality is not adequate. Even in the case of dynamically adding filters, it is recommended in most cases to actually add the filter in the initial filter attributes of the element's style sheet with enabled=0. When the script wants the filter to be displayed, it can then simply set that filter to enabled=1 and the filter will be displayed.
This Web page demonstrates a simple example of changing filter properties from script. This page uses a more complex script that calls filter methods and manipulates properties.
Migrating from OBJECT-based Filters

As Internet Explorer 4.0 was developed, filters were initially supported as OBJECT elements. With the release of the final version of Internet Explorer 4.0, filters made the logical switch to the CSS model for implementation. While this switch won't have any effect on new Web pages, existing documents that employed filter effects as objects are now broken. Authors who are accustomed to using objects and enjoyed the ability to apply a single object to many different controls at once must now specify the filters on each control that will use them. However, since you can change the style.filter string in script, the old-style syntax can be approximated as follows:
<object id=aFilter clsid=...><param name=param-name value=param-value> ... </object> 
site.filter = aFilter
This becomes:
site.style.filter = "someFilter(param-name=param-value, ...)"
However, this solution is hardly the best way to use filters. The new CSS syntax allows multiple filters to be attached and active at once. The Enabled property can be used to turn a given filter on and off.
Filter Design Considerations

Some filters require transparency to function properly. These include Shadow, DropShadow, Glow, and Mask. Text automatically has "transparency," or space around the characters that shows through to the object (or page) behind it. GIF images must be in gif89a format with a transparent color to display these filters properly.
Margins can affect how some filters are applied and rendered. "Clipping" can occur when a margin or DIV boundary is set too close to an object that has a filter applied to it. For instance, applying a glow to text without a margin may have some of the glow effect clipped by the DIV boundary if the text is directly next to it.
Performance is an important factor to consider when designing Web pages with filters. Internet Explorer 4.0 requires processing time to calculate the visual display of filter effects, and some require more time than others to apply. It is useless to try to apply and change a filter on an element before the browser can even render it (such as manipulating a light effect quickly in a looping script function).
While selecting text in the browser window, any applied filter effects are ignored. Once the mouse button is released, the browser reapplies the filter effects to the text. This operation is subject to any performance limitations that were previously experienced.
It is possible to apply one or more filter effects to a group of elements by wrapping them in a DIV. Take care that the DIV itself is positioned if the enclosed elements are positioned. As noted previously, filters require that all containers be either positioned or have defined widths, and parent elements be positioned to display filter effects properly on child elements.
Filters have different methods for creating their effects on elements. For example, the alpha filter affects each pixel as a function of itself (creating either a uniform or gradient effect), while with the glow filter, each pixel inherits from the pixels directly around it, creating a diminishing effect. Your choice of content might be affected by the application method a filter requires to achieve its effect.
Visual Filter Scenarios

There are unlimited uses for filters in both static and dynamic Web pages. The following scenarios explore some of the more common or interesting applications of filter styles and combinations of script and filters.
Creating Static Visual Effects

Static visual effects are the most common use of style filters. These include simply applying a filter to a DIV or object to create a nonchanging effect, such as a text drop shadow. Static effects are an easy way to enhance a Web page's design with minimum effort and bandwidth, and often without scripting.
No-script example

The following example shows how television-style effects can be created using dynamic HTML positioning and the alpha visual filter.
<HTML>
<HEAD><TITLE>Static Alpha Filter Demo</TITLE>
</HEAD>
<BODY>
<DIV style="position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV style="color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg">
</BODY>
</HTML>
Timer script example

Visual effects can be "animated" using a timer script. The following sample shows two filters, alpha and glow, and two different timer methods.
<HTML>
<HEAD><TITLE>Timer Demos</TITLE>
<SCRIPT>
function init()  {
    makeFlash(bob)
    setInterval("fred.filters.alpha.opacity = (fred.filters.alpha.opacity + 5) % 101", 100)
    setInterval("foo(dave)", 100)
}
var delta = 5
function foo(obj)  {
    if ((obj.filters.alpha.opacity + delta > 100)
    ||  (obj.filters.alpha.opacity + delta < 0))
        delta = - delta
    obj.filters.alpha.opacity += delta
}
function makeFlash(obj)  {
    obj.flashTimer = setInterval("bob.filters.glow.enabled = !bob.filters.glow.enabled", 1000)
}
function stopFlash(obj)  {
    clearInterval(obj.flashTimer)
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
<DIV id=bob style="width:50%; filter:glow(Color=#FAF900,Strength=2,enabled=0);" onclick="stopFlash(this)"><H1>Here is some text</H1></DIV>
<DIV id=fred style="width:50%; filter:alpha(opacity=100);"><H1>Here is some text</H1></DIV>
<DIV id=dave style="width:50%; filter:alpha(opacity=50); color: blue"><H1>Here is some text</H1></DIV>
</BODY>
</HTML>
Creating Dynamic Visual Effects

Dynamic visual effects bring a basic level of interactivity to Web documents. Dynamic effects require an event to prompt a change in the document—this can be a mouse rollover or click event, a timer interval, or a sequence of script functions calling the new content states.
Event script example

Here an interactive step has been added to the previous "television caption" sample that displays the caption only when the mouse is over the inline image.
<HTML>
<HEAD><TITLE>Dynamic Alpha Filter Demo</TITLE>
<SCRIPT>
function caption()  {
    if (bob.style.visibility == "hidden")    {
        bob.style.visibility = ""
        fred.style.visibility = ""
    }
    else  {
        bob.style.visibility = "hidden"
        fred.style.visibility = "hidden"
    }
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="bob" style="visibility:hidden; position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV id="fred" style="visibility:hidden; color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg" onmouseover="caption()" onmouseout="caption()">
</BODY>
</HTML>
Timer script example

Timers create cyclical effects, as in the following interactive demonstration.

Creating a Disabled UI Element Effect

Web authors often resort to the trick of using multiple graphics to indicate a user state for a single graphic, such as a navigation bar button. With visual filters, these are no longer required—any graphic can be displayed in such a manner as to indicate whether it is available for user interaction or not. Best of all, it's all done in code, and doesn't require an additional download from a server.
No script example

This page shows how both the gray and alpha filters can visually represent unavailable link states.

Event script example

As interactive objects, links can change state in response to mouse events, as this page demonstrates.

Creating Complex Visual Effects

Combining visual filters, transitions, and sophisticated programming allows Web authors to create complex and compelling visual designs and interactivity. The following examples provide just a glimpse into the versatility of visual effects that are available in authoring for Internet Explorer 4.0.
Simple script example

The following Web page shows how the mask filter can be combined with a series of style changes to create an interesting effect.

Event script example

The light filter is the most unique and complex visual filter. The following sample shows how the filter can be combined with mouse events to create a unique DHTML experience.

Programming example

The same light filter can be controlled by sophisticated programming, as the following sample shows. Watch for additional examples of sophisticated Internet Explorer 4.0-enhanced Web site design on Microsoft Site Builder.

Transitions

Transitions are time-varying visual filters. Their role is to visually transition a control from one state to the next. A common example is changing the SRC of an image to change one image to another onscreen. A transition would provide some kind of animated effect to bring in the new image. Transitions can also be applied to make a control gradually fade in or fade out by changing the visibility property.
Transition filters have methods and events for manipulation. When the filter wants to fire an event, the onfilterchange event is fired. This event can be used to script the srcFilter property on the event object, and then supplies all the necessary information about the event. In this way a script can know when a transition has completed. The methods for the filters allow a transition to be applied and played.
The Apply method freezes the visual appearance of the control by first applying the transition, allowing changes to be made without an immediate repaint such as specifying a new image. The Play method then invokes the transition. At any time, the script can "cut to the chase" and finish the transition by calling Stop. The following example shows how to perform an automatic slide show between images.
<HTML>
<HEAD><TITLE>Transition Blend Demo</TITLE>
<SCRIPT language="JavaScript">
var fRunning = 0
function startTrans()
{
    if (fRunning == 0)
    {
        fRunning = 1
        SampleID.filters.blendTrans.Apply();
        SampleID.src = "sunset.jpg";
        SampleID.filters.blendTrans.Play()
    }
}
</SCRIPT>
<SCRIPT for="SampleID" event="onfilterchange">
fRunning = 0
</SCRIPT>
</HEAD>
<BODY>
<IMG id="SampleID" src="beach.jpg" style="filter:blendTrans(duration=3)" onclick="startTrans()"><BR>
Click image for Transition Filter: Blend
</BODY>
</HTML>
Two transition filters ship with Internet Explorer 4.0, blend and reveal. The blend transition allows a simple fade-in or fade-out with a specified duration, while the reveal transition specifies multiple effects such as boxin, boxout, horizontal blinds, and so on.
The following HTML is an example of a simple transition between two images. Clicking the button runs the doTrans script, which first calls Apply on the revealTrans filter to stop painting of the image. It then sets an alternative image and calls Play on the filter to proceed with the transition. In this case the transition type is set to 8, which corresponds to the vertical blinds transition effect. This is applied using an inline style on the IMG tag.
<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
Function doTrans()
{
    theImg.filters.item[0].Apply();
    theImg.src="circles.bmp";
    theImg.filters.item[0].Play();
}
</SCRIPT>
</HEAD>
<BODY style="background-color:darkblue">
<IMG ID=theImg width=200 height=200
src="clouds.bmp" style="filter:revealTrans(Duration=3.3, Transition=8);">
<BR>
<INPUT type=button value="Start Transition" onClick="doTrans()">
<IMG src="clouds.bmp" style="position:relative; width:1; height:1;visibility:hidden">
<IMG src="circles.bmp" style="position:relative; width:1; height:1; visibility:hidden">
</BODY>
</HTML>
This example also demonstrates the differences between asynchronous and synchronous changes. Changing the innerText of an element is synchronous—the action is completed by the time the statement has executed. Changing the src is effectively asynchronous. Although the actual src property changes immediately, the visual state of the IMG element isn't fully updated until the actual download of the new image is complete. A careful script would wait for the onload event on the image. "Pre-loading" graphics with separate IMG tags is a good way to avoid the synchronicity issue but it will only work if the transition is applied after all image downloads are complete.
Interpage Transitions

Interpage transitions make it possible to provide visual effects to the entire window as a Web page is loaded or exited. Just as programs such as PowerPoint® allow for transitions between slides, you can provide wipes, fades, and even create custom transition types.
Transitions are implemented with META tags placed in the HEAD section of Web pages. The META tag specifies the type of transition, duration, and other variables, as well as whether the transition should occur as the following page is loaded or as it is exited.
Transition Syntax

The syntax for transitions consists of three parts: specifying when the event should be played, the duration of the transition, and what kind of transition effect to use. The following two examples show how to set transitions upon entry and exit of a page.
<META http-equiv="Page-Enter"
CONTENT="RevealTrans(Duration=4,Transition=1)>

<META http-equiv="Page-Exit"
CONTENT="RevealTrans(Duration=2.500,Transition=6)>
The first META tag causes transition 1 to play when the user enters the page, lasting 4 seconds; the second META tag causes transition 6 to play when the user leaves the page, lasting 2.5 seconds (written as 2 seconds and 500 milliseconds).
There are four events that can initiate interpage transitions: Page-Enter , Page-Exit, Site-Enter, and Site-Exit. Duration has a maximum value of 30 seconds.
Transitions Reference

The available reveal transitions that are supported in Internet Explorer 4.0 are described below.

Transition name Value

Box in 0

Box out 1

Circle in 2

Circle out 3

Wipe up 4

Wipe down 5

Wipe right 6

Wipe left 7

Vertical blinds 8

Horizontal blinds 9

Checkerboard across 10

Checkerboard down 11

Random dissolve 12

Split vertical in 13

Split vertical out 14

Split horizontal in 15

Split horizontal out 16

Strips left down 17

Strips left up 18

Strips right down 19

Strips right up 20

Random bars horizontal 21

Random bars vertical 22

Random 23

To easily construct and experiment with these transitions use the following wizard distributed with the Internet Client SDK.
Transitions Wizard HTML-based wizard that generates basic code for the different Transitions, based on the parameters entered by the user.
Transition Design Considerations

The primary concern of designers when implementing transitions is that, since they run asynchronously, it is necessary to track each transition state through events (onfilterchange) to determine when a particular transition is finished. Remember that image downloading is asynchronous and that the visual state of IMG elements isn't fully updated until after images are completely downloaded.
Transition Scenarios

There are unlimited uses for transitions in both static and dynamic Web pages. The following scenarios explore some of the more common or interesting applications of filter styles combined with transitions and, as in the more complex demonstrations, script functions.
Creating Non-Event Transitions

Non-event transitions are analogous to static visual filters—they are used frequently to enhance the visual appearance of a page without changing the level of interactivity of the document.
Simple script example

The following demonstration uses transitions to display information in an interesting manner as the page loads.

Creating Event-Driven Transitions

Event script example

This demonstration shows how a mouse event can trigger a sequence of transitions.

Creating Complex Transitions

Combining visual filters and transitions allows Web authors to create complex and compelling visual designs and interactivity. The following example provides just a glimpse into the versatility of visual effects that are available in authoring for Internet Explorer 4.0.
Event Script Example

Intermediate Web pages (sometimes called "logo pages") provide an opportunity to be creative with transitions.

Timer script example

Computer-based training applications can use timed transitions to demonstrate their subject matter, as the following example shows.

Programming

Transitions can be combined with visual filters and scripting to develop complex site designs. Watch for examples of sophisticated Internet Explorer 4.0-enhanced Web site design on Microsoft Site Builder.

Top of Page
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.

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

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