Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 652
  • Last Modified:

Javascript animation - repeat it?

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
SmartGirl
Asked:
SmartGirl
  • 3
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
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
 
lil_puffballCommented:
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
 
lil_puffballCommented:
hmmm...or maybe not...
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Cd&
0
 
SmartGirlAuthor Commented:
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
 
COBOLdinosaurCommented:
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
 
SmartGirlAuthor Commented:
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now