#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12

    Really simple JavaScript ?


    I've been looking for ages for something to do this, but haven't found anything close yet.

    All I want (which seems simple with JavaScript) is two have two graphics (a static image and a short animated gif).
    At random intervals I want the static image to be replaced by the animated gif, once the cycle is played one retrun to the static image.

    Repeat constantly but with random intervals between the animated gif being displayed.

    Any ideas?

    -D
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var staticurl = 'http://www.pbs.org/newshour/updates/images/bush.jpg';
    var animurl = 'http://images.animfactory.com/animations/money/misc/mailbox_arm_money_md_wht.gif';
    var pre1 = new Image().src = staticurl;
    var pre2 = new Image().src = animurl;
    
    var maxStat = 10; //maximum display of static image
    var minStat = 2; //minimum display of static image
    var animduration = 2.5; //length of animation in seconds
    var imgId = 'pic';
    var runanim = false;
    
    function randomSwap() {
         var stattime = Math.ceil((Math.random() * ((maxStat - minStat) * 1000)) + (minStat * 1000));
         document.getElementById(imgId).src = runanim ? animurl : staticurl;
         setTimeout('randomSwap()', runanim ? (animduration * 1000) : stattime);
         runanim = !runanim;
    }
    
    onload = randomSwap;
    
    </script>
    </head>
    <body>
    <div style="width:166px;height:166px;text-align:center;border:1px gray solid;">
    <image id="pic" src="http://www.pbs.org/newshour/updates/images/bush.jpg">
    </div>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Thanks a lot dude, thats perfect, a lot more than I was expecting.

    Thanks again.

    -D

IMN logo majestic logo threadwatch logo seochat tools logo