• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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)

            Handling Visual Transitions 
        <SCRIPT LANGUAGE="JavaScript"> 
            var duration 
            var direction 
            var transitioning 
            direction = 0 
            duration = 4 

            function filterChange() 
                transitioning = false 

            function doTransition() 
                if (transitioning){ 


                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 
                transitioning = true 
            Handling Visual Transitions 
        <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> 
            <INPUT TYPE="BUTTON" VALUE="Do transition" ONCLICK="doTransition()"> 

        <DIV ID="div1" 
            STYLE="POSITION:absolute; WIDTH:300; 
HEIGHT:300;FILTER:revealTrans(Duration=1.0, Transition=1)" 
            <IMG ID="image1" STYLE= 
                SRC="blue.jpg" WIDTH="300" HEIGHT="300"> 
            <IMG ID="image2" STYLE= 
                SRC="red.jpg" WIDTH="300" HEIGHT="300"> 




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint