Solved

Why Does My Animation only run once?

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JS Plugin Chaining 2 32
jQuery AJAX Redirects Without Response/Error 10 46
Angular - "nest" service calls? 18 23
Rhino javascript replace special characters 4 19
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now