Cycling through images using start/stop buttons

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • maghazi
    New Member
    • Jun 2007
    • 4
    #1

    Cycling through images using start/stop buttons

    Hi guys, I very new to programming and need some help.

    I want to create traffic light using three picture and having two buttons for stop cycle and start cycle. Can anyone help me where to start?
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Hi maghazi, welcome to TSDN!

      You will need setInterval and clearInterval for the Start and Stop buttons respectively.

      As for the buttons, check out this link and for the images, this link - use the src property to change the images.

      If you get stuck, post again with your code.

        Comment

        • maghazi
          New Member
          • Jun 2007
          • 4
          #3
          Good stuff! the buttons stops and recycles the Traffic lights - It is possible that I could change the location of the images? right now, it is just a banner that cycles from red to green to orange. I want to make red to stay at top, orange in the middle, green at the bottom. If I were to do it like a real traffic light, do I make three statetment in the body for IMG SRC?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Originally posted by maghazi
              Good stuff! the buttons stops and recycles the Traffic lights - It is possible that I could change the location of the images? right now, it is just a banner that cycles from red to green to orange. I want to make red to stay at top, orange in the middle, green at the bottom. If I were to do it like a real traffic light, do I make three statetment in the body for IMG SRC?
              Post your code so far.

                Comment

                • maghazi
                  New Member
                  • Jun 2007
                  • 4
                  #5
                  <head><script language ="javascript ">
                  var banners = new Array("banner1. jpg","banner2.j pg","banner3.jp g")
                  var bnrCntr = 0
                  var timer
                  function cycle(){
                  bnrCntr = bnrCntr + 1
                  if(bnrCntr == 3)
                  {
                  bnrCntr = 0
                  }
                  document.Banner .src=banners[bnrCntr]
                  timer = setTimeout("cyc le()", 3000)
                  }
                  function stopCycle(){
                  clearTimeout(ti mer)
                  }
                  </script></head>
                  <body>
                  <IMG SRC "banner1.jp g" name ="Banner" width=20 height=60>
                  <form><input type ="button" value = "Cycle" name="Cycle" onclick="cycle( )">
                  <input type ="button" value="Stop" name="Stop" onclick="stopCy cle()">
                  </form>
                  </body>

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Add two more images. Each should be set to a default 'off' image. Then when it cycles, change the src of two images, the one that is currently 'on' to 'off' and the next image colour that needs to be turned on.

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          Changed thread title.

                            Comment

                            • maghazi
                              New Member
                              • Jun 2007
                              • 4
                              #8
                              How do we set images on or off, that's very stupid I can sense it but I have no idea if images could be set off.

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  Originally posted by maghazi
                                  How do we set images on or off, that's very stupid I can sense it but I have no idea if images could be set off.
                                  That's why I put 'off' in quotes.

                                  By 'off', I mean an image, e.g. black circle, which represents the off state. Change this using the src property.

                                    Comment

                                    Previous template Next
                                    Working...