www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] JavaScript - Change picture script

  1. #1
    Join Date
    Apr 2013
    Posts
    2

    resolved [RESOLVED] JavaScript - Change picture script

    Hi, I am not having success with this JavaScript to change pictures. I would appreciate any help if you happen to see the issue!

    Thanks.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body Onload="pictures();">

    <SCRIPT type="text/javascript">
    var pictures= new Array(4);
    pictureA[0]='star.gif';
    pictureA[1]='star1.png';
    pictureA[2]='star2.gif';
    pictureA[3]='horn.png';
    var secs
    var timerID = null
    var timerRunning = false
    var delay = 1000
    var j=0;
    function pictures()
    {
    for (i=0;i<4;i++)
    {
    InitializeTimer();
    }
    }

    function InitializeTimer()
    {
    // Set the length of the timer, in seconds
    secs = 3
    StopTheClock()
    StartTheTimer()
    }

    function StopTheClock()
    {
    if(timerRunning)
    clearTimeout(timerID)
    timerRunning = false
    }

    function StartTheTimer()
    {
    if (secs==0)
    {
    StopTheClock()
    \\ print the images here
    document.write("<img src='"+ pictureA[0] +"'/>");


    }
    else
    {
    self.status = secs
    secs = secs - 1
    timerRunning = true
    timerID = self.setTimeout("StartTheTimer()", delay)

    }
    }-->

    </SCRIPT>



    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Question

    You have several syntax errors and some assignments that don't make any sense.

    What is it that you are trying to do. Just change a picture every second for 4 pictures and then stop?

    Note you cannot use document.write AFTER the page has been rendered. It reloads the page when it executes.
    It would also help if you indicated where the pictures are located.

    BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces) to make it easier to read
    as well as retain your formatting.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Making some assumptions from the previous guess:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body onload="pictures();">
    <img id="pics" src="">
    
    <SCRIPT type="text/javascript">
    // Modified from:
    // http://www.webdeveloper.com/forum/showthread.php?275917-JavaScript-Change-picture-script&p=1259879#post1259879
    
    /*
    var pictures= new Array(4);
    pictureA[0]='star.gif';
    pictureA[1]='star1.png';
    pictureA[2]='star2.gif';
    pictureA[3]='horn.png';
    */
    
    // Don't have pictures above, so using these for testing;
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg'];
    var pictureA = [];
    for (var i=0; i<imgList.length; i++) { pictureA.push(baseURL+imgList[i]); }
    /* */
    
    var secs;
    var timerID = null;
    var timerRunning = false
    var delay = 1000;
    var j=0;
    
    function pictures() {
      for (i=0; i<4; i++) { InitializeTimer(); }
    }
    
    function InitializeTimer() {
    // Set the length of the timer, in seconds
      secs = pictureA.length-1;
      StopTheClock();
      StartTheTimer();
    }
    
    function StopTheClock() {
      if(timerRunning) clearTimeout(timerID);
      timerRunning = false;
    }
    
    function StartTheTimer() {
      if (secs==0) {
        StopTheClock();
    // print the images here
        document.getElementById("pics").src= pictureA[0];
      } else {
        document.getElementById("pics").src= pictureA[secs];
        secs = secs - 1;
        timerRunning = true;
        timerID = setTimeout("StartTheTimer()", delay);
      }
    }
    
    </SCRIPT>
    
    </body>
    </html>

  4. #4
    Join Date
    Apr 2013
    Posts
    2

    Red face

    Thank you!!!!!!

    I appreciate your help on this very much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles