Filters and Transitions
Written 07/14/2001 by Dan Pupius. Last updated 07/26/2001. Print-friendly version. Back to regular version.

Introduction

When Microsoft released Internet Explorer 4 they included a selection of filters and transitions that allow multimedia-style effects in plain HTML web pages. They can be applied to any HTML control, such as DIV tags, form fields or images. Internet Explorer 5 for Windows built on the existing functionality with more advanced transitions and a different method of applying filters. To see the examples in this tutorial you have to be using Internet Explorer 4+.

Static Filters

Internet Explorer 4+

The static filters can be applied to any HTML control through the style tag:

<

or at runtime through javascript:

document.all["drop"].style.filter = "DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

both produce this

(note: for some reason you must specify the width and height attributes for the filter to work)

The best way to use these filter properties is to use WebFX's Filter Tool, you can also check the Microsoft Documentation, except this has been updated to work with the IE5.5+ method of applying filters.

Internet Explorer 5.5+

With IE5 Microsoft have changed the way filters are applied, they still use the filter property of the style tag, but uses different syntax. In HTML:

style="filter:progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

and from code:

document.all["drop"].style.filter = "progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

If you look at the Microsoft Documentation you will notice several other filters such as Light, Compositor and Matrix. These work a little differently than the others and probably best if you look at the specific documentation when you are interested.

Transitions

These (as far as I am aware) only work in Internet Explorer 5.5+ for Windows. It is therefore necessary to start off with a browser and OS check. See the DHTML library tutorial for more info about that.

Now we need to know how to use them. To find the properties of each transition look at the Microsoft Documentation (if I find the time I may make a utility similar to the WebFX one linked above).

We'll start off with the fade transition that takes a single property "duration":

do fade

Now here is the function that does the above:

function doFadeImage() {
//create object reference
var el = document.all["divFader"];

//add the filter to the style tag
el.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)";

//apply the filter
el.filters[0].apply();

//change the object
if(state) {
el.style.backgroundColor = "#BDAA91";
el.style.color = "#000000";
el.innerHTML = verse1;
state = 0;
} else {
el.style.backgroundColor = "#000000";
el.style.color = "#BDAA91";
el.innerHTML = verse2;
state = 1;
}

//play the filter
el.filters[0].play();
}

Now this may seem a bit complicated so I'll brake it down into 4 important stages:
1. Add the filter to the style attribute, either through code or in the HTML
2. Use the code el.filters[0].apply(); to initiate the transition
3. Make the changes to the object through code
4. Play the changes using el.filters[0].play();

To see how to use transitions with the CoolMenus script check example 14 where you can try all the different filters.

Good luck!

Appendix A - The Matrix Transformation

In the field of Computer Graphics matrices are used to speed up and simplify certain calculations. For example, your 3D-graphcs card has special hardware that uses a 4x4 matrix to rotate, translate or stretch points in 3-dimensions, thus speeding up calculations that are normally done by the main processor.

In Internet Explorer 5, Microsoft have included a Matrix Filter. This, obviously, only works in 2-dimensions but it can be used to apply a transformation to all pixels in an object.

Matrix Math
To get you started here is a brief introduction to 2D matrix multiplication:

x	*	a	b	=	x*a + y*b
y		c	d		x*c + y*d

Now, if this is applied to each pixel in an image, we can get some very interesting results.

Example: rotation
In order to rotate a point around the origin (0,0) you can find the new values of x and y using the following equations (if you don't believe here's a proof for one of the equations):

newX = x*cos(Ø) - y*sin(Ø)
newY = x*sin(Ø) + y*cos(Ø) 

var el = document.getElementById(name);
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
el.filters.item("DXImageTransform.Microsoft.Matrix").[property] = [value];

function rotate(name, angle){ //convert angle into radians
    var rad = degToRad(angle);

    //calculate cos and sin of the angle
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    //create object reference
    var el = document.getElementById(name);
    if(el) {
        //apply the filter
        el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";

        //set up the properties
        el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
        el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";

        //apply the rotation matrix transformation
        el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
        el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
        el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
        el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
    }
}

var angle = 0;
function doRotate() {
    //check to make sure angle is between 0 and 360 degrees
    if(angle>360) angle-=360;
    //increment angle
    angle+=15;

    //do rotation
    rotate("aDiv",angle);

    //recentre div using offset values
    var el = document.getElementById("aDiv");
    el.style.top = 25 - (el.offsetHeight/2);
    el.style.left = 25 - (el.offsetWidth/2);

    setTimeout("doRotate();",10);
}

Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.