topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-image-flipflop-effect.htm / htm



  
  <!-- THREE STEPS TO INSTALL FLIPFLOP:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the onLoad event handler into the BODY tag
  
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  Colin Patterson (colnrita@westnet.com.au ) -->
  
  <SCRIPT language="JavaScript" type="text/javascript">
  
  <!--hide
  
                 //STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT
  
  var wdmax=120;          //set maximum width of square image (px)
  
  var wdmin=0;            //set minimum thickness of edge-on image (px)
  
  var inc=5;              //set step change in px (wdmax-wdmin must be a multiple) )These two variables
  
  var rate = 50;          //pause between steps (in millisec)                      )determine flip-flop speed
  
  var pause = 1000;       //pause between flip and flop (in millisec)
  
  var ff="flip";          //initialise whether movement starts with a "flip" (sideways) or "flop" (vertical) change.
  
                          
  
  function flipflop() {
  
   if (ff=="flip") {
  
    var wd = document.getElementById("pic").getAttribute("width");
  
    wd = wd - inc;
  
    document.getElementById("pic").setAttribute("width",wd);
  
    if (wd==wdmin) {
  
     document.getElementById("pic").setAttribute("src","pic2.gif"); //substitute name of your second picture
  
     inc=-inc;
  
     }
  
    if (wd==wdmax) {
  
     ff="flop";
  
     inc=-inc;
  
     setTimeout("flipflop()",pause);
  
     }
  
     else {
  
     setTimeout("flipflop()",rate);
  
     }
  
    }
  
   else {
  
    var ht = document.getElementById("pic").getAttribute("height");
  
    ht = ht - inc;
  
    document.getElementById("pic").setAttribute("height",ht);
  
    if (ht==wdmin) {
  
     document.getElementById("pic").setAttribute("src","@walk.gif"); //substitute name of your first picture
  
     inc=-inc;
  
     } 
  
    if (ht==wdmax) {
  
     ff="flip";
  
     inc=-inc;
  
     setTimeout("flipflop()",pause);
  
     }
  
     else {
  
     setTimeout("flipflop()",rate);
  
     }
  
    }
  
  }
  
  -->
  
  </SCRIPT>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="javascript:flipflop()">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <center>
  
  <TABLE border="0">
  
  <th width="160" height="160">
  
  <IMG src="@logo.gif" width="120" height="120" ID="pic">
  
  </th></TABLE>
  
  <p>This script alternately "flips" and "flops" between two images, with adjustable smoothness, speed and pauses. It may be useful as an alternative to a crossfade, where you want to create movement to attract attention, or where you want to show two images with equal prominence that don't necessarily look well together (I wrote it to show two dissimilar corporate logos). Small images are less taxing on system resources and will appear smoother in operation.
  
  <p>It is important that:<ol><li>The two images are square and of the same size, and<li>The difference between wdmax (maximum width of square image) and wdmin (minimum thickness edge-on image) is an exact multiple of inc (the step change); otherwise the image will flip once and disappear.</ol>
  
  <p>If only requiring movement in one direction, set the "ff" variable to it, and delete or change the
  
  subsequent resetting of this variable accordingly.</p>
  
  </center>
  
  <p><center>
  
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  
  </center><p>
  
  <!-- Script Size:  3.54 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.