Solved

Javascript animation - repeat it?

Posted on 2004-05-02
7
617 Views
Last Modified: 2013-11-19
I have some simple javascript animation:
var counter=0
var timer
var imgs = new Array()
for(var i=0;i<2;i++) {
  imgs[i]=new Image()
  imgs[i].src=(i+1)+".png"
}

function animate() {
  counter++;
      if (counter >= imgs.length) counter=0;
  document.images["anim"].src=imgs[counter].src
  timer=setTimeout("animate()",200)
}

I want to use it several times on one page calling it this way:
<BODY onLoad="animate()">
<IMG SRC="3.png" NAME="anim">

It will work fine for one instance but if I want multiples I only get one animated and all the rest are static. For each instance I am using the same img src line. I have tried actually making multiple copies of the little java function and loading and calling them seperately but that didn't work either.

Anyone have an idea how I can get multiples of this?
0
Comment
Question by:SmartGirl
  • 3
  • 2
  • 2
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10973517
They each need to have a unique name so you can loop through them:

<IMG SRC="3.png" NAME="anim0">
<IMG SRC="3.png" NAME="anim1">
<IMG SRC="3.png" NAME="anim2">

Then:

function animate() {
  counter++;
     if (counter >= imgs.length) counter=0;
     for (i=0;i<3;i++
     {
         str='anim'+i;
  document.images[str].src=imgs[counter].src
     }
  timer=setTimeout("animate()",200)
}


Cd&
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10973580
You can also have just one name and loop through them, like this:

function animate() {
  counter++;
     if (counter >= imgs.length) counter=0;
  var img=document.images["anim"];
  for(i=0;i<img.length;i++){img[i].src=imgs[counter].src;}
  timer=setTimeout("animate()",200)
}
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10973582
hmmm...or maybe not...
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10973632
B?  Was there something wrong with that solution.  If you still needed more, all you had to do was ask. :^(

Cd&
0
 

Author Comment

by:SmartGirl
ID: 10973636
The code didn't compile and I had to correct it. It took a fair amount of trouble shooting to find the error. For 500 points I expect it to at least compile.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10973685
Compile?  Javascript?  

In any case if you want code corrected, post the errors; or not ...  If you want to pay my normally hourly rate, you get a guarantee of typo free code.  But as long as you are getting it for free I reckon you should be saying thank for volunteering your time to help me; but I guess some people think the rest of the world owes them something.

Cd&

0
 

Author Comment

by:SmartGirl
ID: 11354823
I gave the question the maximum points because it was urgent. I have to pay for points, they AREN'T FREE, and I expect to get my money's worth. If you don't want to put the effort into answering the question correctly don't expect to get full points.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

707 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