DHTML Lab: Dynamic Headline Fader; Blend Transition Filter

Dynamic Headline Fader
the IE4 Blend Transition Filter

Internet Explorer 4 introduced visual and transition filters, allowing us to create multimedia-style effects by applying the filters or transitions to HTML elements with proprietary CSS properties. These properties may find their way into the Cascading Style Sheets, Level 2 (CSS2) Specification. The present CSS2 Working Draft has a placeholder heading for Filters.

Discussing the fairly vast and complex topic of filters is beyond the scope of the present column. You may, however, explore the documentation in the Microsoft Internet SDK. Here, we will delve into the appropriate filter for our effect, the Blend Transition Filter.

Like all filters, Blend can only be applied to HTML elements that Explorer 4 considers "controls", that is, elements that define their own rectangular space within the browser client area. These are:

• BODY - yes, a filter can be applied to the whole of the document.
• BUTTON - discussed in column 5
• DIV - as a positioned element, or with a width and height defined. <DIV ALIGN=RIGHT>, for example, is not a "control."
• IMG
• INPUT
• MARQUEE - sigh
• SPAN - again, only as a positioned element, or with a width and height defined. <SPAN STYLE="color:red">, for example, is not a "control".
• TABLE
• TD
• TEXTAREA
• TFOOT
• TH
• THEAD
• TR

What does it do?

All of the above elements can have their contents or style attributes changed through DHTML. We have used the innerHTML property to change element content on-the-fly many times in these columns. We have also changed style properties. And, naturally, we've been swapping image src's to create rollovers, since pre-DHTML days. All of these changes, or transitions, have 2 stages, a before and an after. In the case of an image, for example, the before is the displayed image. The after is the new image that is displayed after the src change. In the case of a DIV/SPAN, the before is all the HTML (including images, forms, etc.) contained. The after is the new HTML rendered after a dynamic replacement.

All filters of the transition type act in this way:

• the before state is frozen
• the update is performed, bringing the after state into existence, but without a visible page
• modification
• the browser now has two versions of the same control co-residing with the before visible
• the after state replaces the before state, using the transition requested

The Blend Transition Filter, therefore, blends (dissolves, in movie lingo) the after state of a "control" into the before state, replacing it.

If you are using Explorer 4, change the color of the chameleon below:

Disabled  Disabled

Creating a Blend transition

The Blend transition is defined in the stylesheet using this convention:

filter:blendTrans(duration=duration in seconds)

<IMG ID="imCham" SRC="cham1.gif"
     STYLE="filter:blendTrans(duration=2)">
<BUTTON onClick="blendCham('cham2.gif')">
    Change My Color!</BUTTON>
<BUTTON onClick="blendCham('cham1.gif')">
    Change Me Back!</BUTTON>

elementReference.filters.blendTrans.Apply();
    // FREEZE the before state
	
...statements changing element state go here...
elementReference.filters.blendTrans.Play();
    // BLEND after state into before state

function blendCham(which) {
    imCham.filters.blendTrans.Apply();
    imCham.src = which;
    imCham.filters.blendTrans.Play();
}

#elNews {
    position: absolute;
    width: 130;
    height: 40;
    background-color: white;
    filter:blendTrans(duration=1);
}
Now we can complete the script for Explorer.