DHTML Lab: Dynamic Headline Fader; Blend Transition Filter | WebReference

DHTML Lab: Dynamic Headline Fader; Blend Transition Filter


Logo

Dynamic Headline Fader
the IE4 Blend Transition Filter

DHTML News Fader


Parameters used in this example:

General:
• box width: 130;
• box height: 60;
• box color: white;

Timing:
• blend interval: 4;
• blend duration: 1;
• loops: 1;

Link Text:
• text decoration: underline;
• text alignment: left;
• font color: black;
• font size: 9pt;
• font weight: normal;
• font style: normal;
• font family: Times New Roman,serif;
• line height: 11pt;

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:


  

Creating a Blend transition

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

filter:blendTrans(duration=duration in seconds)

We placed the chameleon on the page with this tag:

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

The actual transition is performed by a script that takes this form:

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

Our chameleon transition, therefore, used this function, its one argument being passed by the onClick handler of BUTTON. All we do is perform the classic image swap, sandwiched between the Apply() (Freeze!) method and the Play() (Do It!) method.

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

Understood, Get Back to the Fader!

As you may have surmised, the Blend Transition Filter will be applied to the elNews element, which we will be updating with innerHTML. Our elNews style declaration becomes:

    #elNews { position: absolute; width: 130; height: 40; background-color: white; filter:blendTrans(duration=1); }

Now we can complete the script for Explorer.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan. 28, 1998
Revised: Feb. 03, 1998

URL: http://www.webreference.com/dhtml/column13/fadeIEone.html