Wyświetlenie obrazka określoną ilość razy

Mam następujący kod:

var x=200; y=300; t=0.0;
function przesun(){
 for (i=0;i<30;i++){
  document.write("<img src=\"kula1.gif\" style=\"position:absolute;\" name=\"kula\" />");
  x=i*20+100;
  y=100*Math.sin(t+i/3)+250;
  kula[i].style.left=x;
  kula[i].style.top=y;
  t=t+0.003;
 }
}

Chciałbym, żeby obrazek 'kula1.gif' wyświetlił się tyle razy na ile wskazuje licznik "i", w jaki sposób można to zrobić?

zamiast przez document.write twórz obiekt przez document.createElement i zapisuj referencje do tych obiektów gdzieś w tablicy. Przykład:

var x=200; y=300; t=0.0;
function przesun(){
   var kula_arr = [];
   for (i=0;i<30;i++){
   var kula =  document.createElement('img');
   //tu poustawiaj te paramentry które wcześniej były w stringu, czyli src itd. 
   x=i*20+100;
   y=100*Math.sin(t+i/3)+250;
   kula.style.left=x;
   kula.style.top=y;
   kula_arr[i] = kula;
   t=t+0.003;
 }
}

Ta tablica kula_arr generalnie nie jest potrzebna żeby osiągnąć to co opisałeś, ale przyda się np. żeby potem wszystkie albo tylko wybrane kule usunąć.

zamiana znacznia `` na <code class="javascript"> - furious programming

Działanie skryptu jest inne do zamierzonego. Mianowicie chodzi o to, żeby sobie wyświetlić "i" kul, a następnie je "animować" jako falę sinusoidalną. Poniżej kod całego skryptu:

var x=200; y=300; t=0.0;
function przesun(){
   var kula_arr = [];
   for (i=0;i<30;i++){
   var kula = document.createElement('img');
       kula.setAttribute("src", "kula1.gif");
       kula.setAttribute("position", "absolute");
       kula.setAttribute("name", "kula");
   document.getElementById("area").appendChild(kula);
   x=i*20+100;
   y=100*Math.sin(t+i/3)+250;
   kula.style.left=x;
   kula.style.top=y;
   kula_arr[i] = kula;
   t=t+0.003;
 }
}
function start(){
 stoper1=setInterval('przesun()', 50);
 sta.disabled=true;
 sto.disabled=false;
}
function stop(){
 clearInterval(stoper1);
 sta.disabled=false;
 sto.disabled=true;
}

Dopóki fizycznie wkleiłem w html'u 30 razy img skrypt działał poprawnie, z tą pętlą wyświetlającą obiekty img niezbyt. Dlaczego?

var t=0.0;
var kula_arr=[];

function przesun()
  {
   for (i=0;i<30;++i)
     {
      var kula;
      if(kula_arr.length<=i)
         {
          kula=document.createElement('img');
          kula.setAttribute("src","kula1.gif");
          kula.setAttribute("position","absolute");
          kula.setAttribute("name","kula");
          document.getElementById("area").appendChild(kula);
          kula.style.left=i*20+100;
          kula_arr[i]=kula;
         }
      else kula=kula_arr[i];
      kula.style.top=100*Math.sin(t+i/3)+250;
     }
   t+=0.003;
  }

function start()
  {
   stoper1=setInterval('przesun()', 50);
   sta.disabled=true;
   sto.disabled=false;
  }

function stop()
  {
   clearInterval(stoper1);
   sta.disabled=false;
   sto.disabled=true;
  }

Teraz rzeczywiście wyświetla odpowiednią liczbę tych img, ale nie ma "animacji".