Solved

Why Does My Animation only run once?

Posted on 1997-10-09
4
182 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 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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

832 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