O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Transition Visual Effects

NN n/a, IE 4 (Win)

Problem

You want elements that change their visual characteristics (e.g., hiding, showing, image swapping) to reveal the new state by way of a visual effect such as a wipe, barn door, checkerboard, or dissolve.

Solution

Transitions in IE for Windows are part of the proprietary filter extensions to CSS (not implemented in IE for Macintosh). Two filter syntaxes are available. One is backward-compatible all the way to IE 4; the other requires IE 5.5 or later. I'll demonstrate a solution that applies a dissolve transition between image swaps from Recipe 12.2.

Transitions have two components. The first is a filter definition applied via style sheet rules. The following modification of the <img> tag for Recipe 12.2 adds a one-half second dissolve (fade) transition filter in the backward-compatible syntax:

<img name="products"  height="20" width="50" border="0" src="img/prodNormal.jpg" 
style="filter:blendTrans(duration=0.5)" alt="Products">

Here's the newer syntax, which utilizes a more powerful ActiveX control delivered with IE 5.5 for Windows or later:

<img name="products"  height="20" width="50" border="0" src="img/prodNormal.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=0.5)" 
alt="Products">

The second component of an element transition consists of two scripted methods of the filter object: apply( ) and play( ) . The apply( ) method freezes the view of the element whose filter you address. This gives you the opportunity ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required