The script below writes out images in a graph style based on the variable
intSteps. It works
great like this. However, what I want to do is make them write out
sequencially sort
of like an animated thing. My idea was to call the functions in a
setTimeout() like this:

setTimeout("writeRight()",1000)

This only executes once. I also tried setInterval() with
virtually the same results.  I also tried writing a bunch of if statements
rather than a loop.

My thinking was that since this was inside the loop it would execute on each
iteration of the loop. Apparently not. The effect I'm after is seeing each
footstep appear one at a time until the right
number is reached. Suggestions?

here is the URL for what I'm working on.

http://www.mikeemedia.com/dev/xxx.asp


<script language="JavaScript" type="text/JavaScript">
 var intSteps=0;
 var intTop=200;
 var intLeft=200;
 var intTotal=5400;
 var strChar="char2";
 var rndTotal=(intTotal/500) *500

 function writeRight(){
  document.write('<img style="vertical-align:bottom;float:right"
src="../images/footStepsRight.gif">');
 }

 function writeLeft(){
  document.write('<img style="vertical-align:top;float:left"
src="../images/footStepsLeft.gif">');
 }

 while(intSteps<rndTotal){
  document.write('<span style="position:absolute;top:' + intTop + 'px;left:'
+ intLeft + ' px;height:45px;width:36px;padding:0px">');
  writeLeft()
  intSteps+=500;intLeft+=27
   if (intSteps < rndTotal) {
    writeRight()
   }
  document.write('</span>')
  }
  document.write('<img src="../images/' + strChar + 'D.gif"
style="position:absolute;top:' + (intTop + 2) + 'px;left:' + (intLeft + 10)
+ 'px">')
  document.write('<span style="position:absolute;top:' + (intTop + 10) +
'px;left:' + (intLeft + 36) +
'px;padding:1px;color:#175692;font-weight:bold;background-color:#fe7a22">')
  document.write(intTotal + "/" + rndTotal)
  document.write('</span>')
</script>