12.9 Creating Transition Visual Effects

NN n/a, IE 4 (Win)

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

12.9.2 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 to make the change(s) to the element out of view. Then the play( ) method lets the transition filter execute the transition between the original and modified states. Modifying the image-swapping function of Recipe 12.2 to accommodate the backward-compatible filter syntax causes the function to become:

function setImage(imgName, type) {
    if (document.images) {
        document.images[imgName].filters["blendTrans"].apply( );
        if (type =  = "hilite") {
            document.images[imgName].src = imagesHilite[imgName].src;
        } else if (type =  = "normal") {
            document.images[imgName].src = imagesNormal[imgName].src;
        }
        document.images[imgName].filters["blendTrans"].play( );
        return true;
    }
    return false;
}

If you use the newer ActiveX control for filters, the function becomes:

function setImage(imgName, type) {
   if (document.images) {
      document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].apply( );
      if (type =  = "hilite") {
          document.images[imgName].src = imagesHilite[imgName].src;
      } else if (type =  = "normal") {
          document.images[imgName].src = imagesNormal[imgName].src;
      }
      document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].play( );
      return true;
   }
   return false;
}

The only other difference between the Recipe 12.2 version and the transition-enhanced versions is that the return true statement is moved to execute after the transition plays.

12.9.3 Discussion

The two generations of CSS filters in IE for Windows present very different ways of referencing specific transition effects. Transitions in the backward-compatible form are divided into two families: the blend (dissolve) and reveal (numerous types). Assign a blend via the blendTrans( ) filter, with one parameter for the duration in seconds:

img.blends {filter:blendTrans(duration=0.5)}

A reveal transition (revealTrans( )) definition includes two parameters: transition, which requires an integer value corresponding to the type of shape used in the transition, and duration, which controls the speed:

div.wipe {filter:revealTrans(transition=7, duration=1.5)}

Transition types are listed in Table 12-3.

0

12

1

13

2

14

3

15

4

16

5

17

6

18

7

19

8

20

9

21

10

22

11

23

You can modify the properties of a particular filter by script. For example, if you want to change an element's transition filter from a wipe to a circle in style, reference the filter's transition property as follows:

elementReference.filters["revealTrans"].transition = 2;

In the newer filter syntax, each transition type has its own filter, as shown in Table 12-4.

The newer filter mechanism is obviously more powerful than the backward-compatible version, although it is also considerably more verbose because you must reference the ActiveX control in references to the filter:

document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].apply( );

If you want to change the transition type after a page has loaded, you can assign a new filter string to the style.filter property:

elementRef.style.filter = "progid:DXImageTransform.Microsoft.Iris(duration=1.0)";

References to filter styles can get tricky because the reference syntax varies with your intention. To control an existing filter type (to invoke one of its methods or alter one of its properties), use the filters array of the element itself (not the element's style property). The index to the array can be either an integer (corresponding to the source code order of the filters assigned to the element) or a string name of the specific filter. To control the filter type, assign a complete filter specification to the element's style.filter property.

Using the apply( ) and play( ) methods of a filter object works within the same page when you alter some visible characteristic of an element. But if you want to use these transitions for slide shows when the slides are different HTML pages, you must assign the transition filters to <meta> tags of the pages. Proprietary attribute values instruct IE for Windows to apply the defined transition to the page upon entry and exit. Usually you need a transition on either entry or exit, but not both. The exception might be if you also have an intervening blank or black page between slides to emphasize two different effects, such as an iris-in when entering the blank page and an iris-out when leaving the blank. The <meta> tags for the blank page in this scenario look like the following:

<meta http-equiv="Page-Enter"
content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')">
<meta http-equiv="Page-Exit"
content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')">

By placing these transitions in the blank pages, you don't need to specify page transitions in the content slides. Nor is any scripting required for the transitions. But you still use a script to assemble the URL of the next content slide and pass that data as a search string to the blank page (see Recipe 10.6). A script in the blank page parses the location.search data to navigate to the next content slide, causing the exit transition to fire en route.

12.9.4 See Also

Recipe 10.6 for passing data between pages via URLs; Recipe 15.4 for a DHTML slide show; for complete details on IE transition types and their properties, visit http://msdn.microsoft.com/workshop/author/filter/filters.asp.