?
Solved

Why Does My Animation only run once?

Posted on 1997-10-09
4
Medium Priority
?
199 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:johnny99
  • 3
4 Comments
 
LVL 2

Author Comment

by:johnny99
ID: 1271157
Edited text of question
0
 
LVL 2

Author Comment

by:johnny99
ID: 1271158
Edited text of question
0
 
LVL 10

Accepted Solution

by:
kollegov earned 600 total points
ID: 1271159
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
 
LVL 2

Author Comment

by:johnny99
ID: 1271160
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question