Combining Effects | Dynamic HTML in Action

Transitions and filters can be combined to create some unique effects. To combine different effects, simply add them as filter arguments in the STYLE attribute, as shown in Code Listing 16-8. In Figure 16-7, you can see how the image of a car looks when the random dissolve and circle out transitions are applied along with the shadow filter.

Code Listing 16-8.

 <HTML> <HEAD> <TITLE>Listing 16-8</TITLE> <SCRIPT FOR=window EVENT=onload LANGUAGE="JavaScript">   car.filters.item(0).apply()   car.filters.item(1).apply()   car.style.visibility="visible"   car.filters.item(0).play()   car.filters.item(1).play() </SCRIPT> </HEAD> <BODY> <IMG ID="car" SRC="car.gif"; STYLE="visibility: hidden;      filter: revealtrans(duration=2.0, transition=12)              revealtrans(duration=2.0, transition=3)              shadow(color=gray, direction=135)"> </BODY> </HTML>

click to view at full size.

Figure 16-7. A combination of the random dissolve and circle out transition effects with the shadow filter.

In Code Listing 16-8, we used two transition effects and one filter. Notice that each additional transition effect needs to be applied and played individually. It is possible to override the duration argument specified in a particular transition by providing a number as an argument for the play method in the script. For example, to change the circle out transition so that it completes in four seconds instead of two, simply change the last line of the script code to car.filters.item(1).play(4).

Interpage Transitions

The preceding examples have covered how to use transitions with elements on one page. Internet Explorer also provides a mechanism that allows you to apply transition effects when moving from one page to another. These interpage transitions can be used when either entering or exiting a page.

Interpage transitions are accomplished with a <META> tag in the header region of the page, as shown in the next example. To see the transition take place, we need two pages, an initial page and a target page. Code Listing 16-9 sets up a simple initial page containing one image and one hyperlink, with a yellow background so that the transition is easier to see.

Code Listing 16-9.

 <HTML> <HEAD> <TITLE>Listing 16-9</TITLE> </HEAD> <BODY BGCOLOR="yellow"> <A HREF="lst16-10.htm">Click here for an interpage transition</A> <P> <IMG SRC="magic.gif"> </BODY> </HTML>

The hyperlink we set up in Code Listing 16-9 initiates a jump to the target page. The target page in this example is also simple, containing only one image. The code for the target page is shown in Code Listing 16-10; you can get an idea of what the transition looks like in Figure 16-8.

Code Listing 16-10.

 <HTML> <HEAD> <TITLE>Listing 16-10</TITLE> <META HTTP-EQUIV="Page-Enter"       CONTENT="revealtrans(duration=3.0, transition=23)"> <META HTTP-EQUIV="Page-Exit"       CONTENT="revealtrans(duration=3.0, transition=23)"> </HEAD> <BODY> <A HREF="lst16-9.htm">Click here for an interpage transition</A> <P> <IMG SRC="flower.gif"> </BODY> </HTML>

Figure 16-8. An interpage transition.

Notice that the header region of Code Listing 16-10 contains two <META> tags, which control the details of the transitions. The first one specifies the event that will trigger the transition, in this case, the page-enter event, the duration of the transition, and the type of effect to use (a random transition, with a numeric value of 23). To see the transition, simply open Listing 16-9 (chap16\lst16-10.htm on the companion CD) and click the hyperlink to move to the target page. The second <META> tag in Listing 16-10 controls the transition out of the page by setting HTTP-EQUIV to Page-Exit.

Visual filters and transitions are an easy way to add interesting, low-bandwidth special effects to a page. In the next part of this book, we will take a look at additional ways, using both high-bandwith and low-bandwidth techniques, of adding multimedia and special effects to Web pages.