Home/ Questions/Q 7496387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T18:35:47+00:00

<div id=dragon style=position: absolute; left: 600px; top: 400px; onload=timeimgs(‘9’);> </div> <script language=JavaScript> var anim_images=new

  • 0
 <div id="dragon" style="position: absolute; left: 600px; top: 400px; " onload="timeimgs('9');">


</div>

  <script language="JavaScript">


  var anim_images=new Array();
  //putting drag0 to drag9 png into the anim_images array

   for (i=0;i<=10;i++) {
    var name;
   name=eval("drag" + numb + ".png");
    anim_images.push("name");
     }

      function imgturn(numb) { 

   if (numb == "9") { // This will loop the image

    //getting the image of the array when reach 9
    document["demo"].src=anim_images[9];

    //starting again with drag0.png?
    timeimgs('0');
     }

    else { 

    document["demo"].src=anim_images[numb];


    timeimgs(numb = ++numb);
    }
 }   


  function timeimgs(numb) { // Reusable timer

 thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
  }



  </script>

Right now, it isn’t working yet. it set the drag0.png to 200 width and 200 height. and I want to animate drag0.png to drag9.png continuously.

Any inputs are appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    HTML:

    <div id="dragon" style="position:absolute; left:60px; top:40px; width:640px; height:480px; "></div>

    JAVASCRIPT:

    function animateImagesStart() {
    // next array generation code only for my sample/test: comment it or delete
    var imgs=[
            "http://4.bp.blogspot.com/-PilKprMNhpo/TVc4rKk_gKI/AAAAAAAAAWo/O3wPK3kIH_8/s640/two_flowers.preview.jpg",
            "http://1.bp.blogspot.com/-4-NEunVEZxA/TWendjaBwOI/AAAAAAAAAAU/KKO4MDt5xJ0/s640/10_4_orig.jpg",
            "http://4.bp.blogspot.com/-pc9ImOpPTs0/TaxDIYd5JnI/AAAAAAAAA_M/PF8b7H3nCs8/s640/ocean-flowers.jpg",
            "http://4.bp.blogspot.com/-3CjVKRE6kXE/Ti_Gy6fXKuI/AAAAAAAAG3k/-er17XD7uJc/s640/cherry-blossom-pink-flowers-3.jpg",
            "http://whatscookingamerica.net/EdibleFlowers/LavenderFlowers.jpg",
            "http://www.photographyblogger.net/wp-content/uploads/2010/05/flower23.jpg",
            "http://1.bp.blogspot.com/_24bCsL1xWcM/S6ob05W5KbI/AAAAAAAAAOQ/ZEQK9aiR-nQ/s1600/Flowers.jpg",
            "http://3.bp.blogspot.com/_NjdBzKI5nYs/Sc79kMCKxZI/AAAAAAAABu8/vfk6RrGzpPw/s640/flower+sky+wallpaper+image+photo+pic.jpg",
            "http://4.bp.blogspot.com/-ik3E8PBBf70/TwaZ9PMNbrI/AAAAAAAAAG0/kNrGnEbZ-WY/s1600/flowers2.jpg",
            "http://www.funeral-flowers-online.com/funeral-flowers.jpg"
        ];
    // next array generation code based on your code: uncomment it
/*    
    var imgs=[];
    for(var i=0;i<10;i++)imgs.push("drag"+i+".png"); // 10 images
*/
    // preloading images
    var img,count=imgs.length,
        imageLoadComplete=function(ev) {
            if(ev.type=="error")imgs.splice(imgs.indexOf(this),1);
        };
    for(var i=0;i<count;i++){
        img=new Image();
        img.onerror=imageLoadComplete;
        img.src=imgs[i];
        imgs[i]=img;
    }

    var domImg=document.getElementById("dragon"),
        currentImageIndex=0,
        animateImages=function(){
            if(currentImageIndex>=imgs.length)currentImageIndex=0;
            if(imgs[currentImageIndex].complete)domImg.style.backgroundImage="URL("+imgs[currentImageIndex].src+")";
            currentImageIndex++;
            setTimeout(animateImages,1000);
        };
    setTimeout(animateImages,0);
}

if(window.addEventListener)window.addEventListener("load",animateImagesStart,false);
else if(window.attachEvent)window.attachEvent("onload",animateImagesStart);

    Insure that each of your images has same size (width and height) as DIV#dragon or replace DIV#dragon with IMG#dragon html element and use IMG src property instead of style.backgroundImage. Example: http://jsfiddle.net/RK7u9/1/

    • 0