Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Location
    localhost
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Next button for image, beginner here

    Hello, first of all: sorry for my english, not native language.

    so i have:
    <body>
    <img src="hello.png" />
    </body

    I want a "next button", when i press to skip at "hello2.png". Probably it's very simple but i really don't like javascript, i don't know how to make this.
    I want to be very simple and small if that's possible, what i founded on google it's too hard for me to edit. Thanks u very much!

    Hope this is right section.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    1. Provide the button in HTML, give it an onclick attribute to execute a Javascript function
    2. Give the img an id attribute for easy Javascript access
    3. Let Javascript know what the list of possible images is
    4. Inside the Javascript function replace the img src with the next image, remember the index of the current image

    HTML
    Code:
    <body>
    <img id="myimage" src="hello.png" />
    <button onclick="nextImage();">Next</button>
    </body>
    Javascript
    Code:
    var myImages = ['hello.png', 'hello2.png', 'hello3.png'];
    var currentIndex = 0;
    
    function nextImage() {
       if(currentIndex < (myImages.length-1)) {
          currentIndex++;
          document.getElementById('myimage').src = myImages[currentIndex];
       }
    }


  •  

    Posting Permissions

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