Why Does My Animation only run once?

OK the script below is something I copied from a page by David Schauder, schauder@ecsel.psu.edu, and adapted to do what I wanted.

The original script was designed to replace one image with another, and it did, every time you clicked on the link.

I want to have a gif, "ball1.gif" and have the user click on a button/link, at which point the gif would be replaced with an animated gif, "ball2.gif".

It works, but only once! When you click on the button a second time it doesn't re-animate, i.e. reload the gif. I tried to make a link which reset the source to the original, non-animated gif, but that didn't work either!

Why is this? It's driving me crazy!
Here's the script... TIA
------------------------------------------------------------

<html>
<head>
<title>Javascript Image Menu</title>
</head>
<script>
// This functions preloads the Images for quick reload
function preLoadImage()
{
  ballimages = new Array()
  for (i=1; i<3; i++) {
      ballimages[i-1] = new Image()
      ballimages[i-1].src = "ball" + i + ".gif"
  }
}
 
function changeImage(a)
{
  document.images[0].src = ballimages[a].src        
}
</script>

<body bgcolor = "FFFFFF" text="000000"
 onLoad = "preLoadImage()">
<br>
<center>
<img src="ball1.gif" border=0 name="ballOne"><br>
<a href="javascript:changeImage(1)">
Animate</a><br>
<br>
</body>
</html>
LVL 2
johnny99Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

johnny99Author Commented:
Edited text of question
0
johnny99Author Commented:
Edited text of question
0
kollegovCommented:
It wouldn't work if you suppose to have
non-looped animated gif, I found that
actually there is no way to control
gif animation in Java Script....
I'd suggest to make animation from several non animated images
something like that:

var nimages=10;
function preLoadImage()
{
  ballimages = new Array()
  for (i=0; i<nimages; i++) {
  ballimages[i] = new Image()
  ballimages[i].src = "ball" + i + ".gif"
}
            }


var i=0;
function startanimate()
{i=0;
 animate()
}

function animate()
{ document images[0].src=ballimages[i].src;
  i++;
  if(i>=nimages)
     {i=0; // if you want to make loop
      // or return here if you want animate once
      // you also can reset image to stop state image here
     }
  setTimeout("animate()",100);
}

Just call startanimate from your HTML
to start animation.

this will reset current state counter
and call animate() which will call itself recursevly
to change to next animation frame.

You can loop infinitly or stop after end...

Virtual_Max
http://www.geocities.com/siliconvalley/lakes/8620

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
johnny99Author Commented:
You can have the points, but it's a bit of a let-down, there's no way to control animated gifs from JavaScript? Oh well...

johnny
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.