Visual Transitions
| The Internet Explorer also supports visual transitions to help make your web page come alive . There are 24 transitions, and they enable you to fade one element out and another in using effects such as "circle in" and "wipe down" and so on. Here's an example that will enables you to play with all the transitions. In this example, the code toggles between a red square and a blue square, using the transition you select from the drop-down list to move between them: (Listing 16-15.html on the web site) <HTML> <HEAD> <TITLE> Handling Visual Transitions </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var duration var direction var transitioning direction = 0 duration = 4 function filterChange() { transitioning = false } function doTransition() { if (transitioning){ return } div1.filters.item(0).apply() if (direction == 1){ direction = 2 image2.style.visibility = "visible" image1.style.visibility = "hidden" } else { direction = 1 image1.style.visibility = "visible" image2.style.visibility = "hidden" } div1.filters.item(0).Transition = document.form1.select1.selectedIndex div1.filters(0).play(duration) transitioning = true } //--> </SCRIPT> </HEAD> <BODY> <H1> Handling Visual Transitions </H1> <DIV STYLE="POSITION:absolute;TOP:150;LEFT:320"> <FORM NAME="form1"> <SELECT ID="select1"> <OPTION>Box in</OPTION> <OPTION>Box out</OPTION> <OPTION>Circle in</OPTION> <OPTION>Circle out</OPTION> <OPTION>Wipe up</OPTION> <OPTION>Wipe down</OPTION> <OPTION>Wipe right</OPTION> <OPTION>Wipe left</OPTION> <OPTION>Vertical blinds</OPTION> <OPTION>Horizontal blinds</OPTION> <OPTION>Checker board across</OPTION> <OPTION>Checker board down</OPTION> <OPTION>Random dissolve</OPTION> <OPTION>Split vertical in</OPTION> <OPTION>Split vertical out</OPTION> <OPTION>Split horizontal in</OPTION> <OPTION>Split horizontal out</OPTION> <OPTION>Strips left down</OPTION> <OPTION>Strips left up</OPTION> <OPTION>Strips right down</OPTION> <OPTION>Strips right up</OPTION> <OPTION>Random bars horizontal</OPTION> <OPTION>Random bars vertical</OPTION> <OPTION>Random</OPTION> </SELECT> <INPUT TYPE="BUTTON" VALUE="Do transition" ONCLICK="doTransition()"> </FORM> </DIV> <DIV ID="div1" STYLE="POSITION:absolute; WIDTH:300; HEIGHT:300;FILTER:revealTrans(Duration=1.0, Transition=1)" ONFILTERCHANGE="filterChange()"> <IMG ID="image1" STYLE= "Position:absolute;width:300;height:300;visibility:hidden" SRC="blue.jpg" WIDTH="300" HEIGHT="300"> <IMG ID="image2" STYLE= "Position:absolute;width:300;height:300" SRC="red.jpg" WIDTH="300" HEIGHT="300"> </DIV> </BODY> </HTML> You can see the results in Figure 16.13, where I'm using the vertical blinds transition. If you want to use transitions, take a look at this code, which shows how to handle the direction of the transition and set the duration and so on. Figure 16.13. Using visual transitions.  |
