Full version: jsB@nk » Image » Flipflop
URL: https://www.javascriptbank.com/flipflop.html
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.
Full version: jsB@nk » Image » Flipflop
URL: https://www.javascriptbank.com/flipflop.html
<script language="JavaScript" type="text/javascript"><!--hide// Colin Patterson ([email protected] ) //STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENTvar 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 variablesvar rate = 50; //pause between steps (in millisec) )determine flip-flop speedvar 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","logojs.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","logojs.gif"); //substitute name of your first picture inc=-inc; } if (ht==wdmax) { ff="flip"; inc=-inc; setTimeout("flipflop()",pause); } else { setTimeout("flipflop()",rate); } }}--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="javascript:flipflop()"></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->