Solved

Why Does My Animation only run once?

Posted on 1997-10-09
4
190 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 200 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap Form 16 42
Understanding UserAgent String 2 49
Add somewhat of a wildcard to your javascript 12 31
REST call Failing 1 16
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

697 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