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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Image on Click

    Hi all,
    I'm trying to add a small section on my blog where the picture changes when you click on it. I have about 6 pictures I would like to cycle through, and stop on the 6th.
    I have a basic code right now, but it only goes through two pictures, image 1 and image 2. How do I get it to go from image 1 to image 2, image 2 to image 3, etc. on click?

    Here's what I have:

    PHP Code:
    <!DOCTYPE html
    <
    html
    <
    head
    <
    script type="text/javascript"
    cc=0
    function 
    changeimage() 

    if (
    cc==0
      { 
      
    cc=1
      
    document.getElementById('myimage').src="image2.gif"
      } 
    else 
      { 
      
    cc=0
      
    document.getElementById('myimage').src="image1.gif"
      } 

    </script> 
    </head> 

    <body> 

    <img id="myimage" onclick="changeimage()" border="0" src="image1.gif"/> 


    </body> 
    </html> 
    Thanks!

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:

    <script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

    Try that.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nicholagi View Post
    Code:

    <script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

    Try that.
    Tried it, and for some reason, none of my images show up. I don't have them saved anywhere, I'm just using imageshack to host them, so maybe that's the problem? Do they have to be saved somewhere or can I use the link? I'm a total amateur with this stuff.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by nicholagi View Post
    Code:

    <script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

    Try that.
    A few errors:

    defining arrays is done by either:
    imgs=["","",""];
    or:
    imgs=new Array("","","");

    And in order to make the script support any length of the the array of images
    Code:
    if (x==5) { x=0; } }
    should be
    Code:
    if (x==imgs.length) { x=0; } }
    so:
    Code:
    <script type="text/javascript">
    imgs=["img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"];
    var x=0;
    function change(){
      document.getElementById("bob").src=imgs[++x];
      if (x==imgs.length){
        x=0;
      }
    }
    </script>
    
    <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Alternative solution, stopping at 6th image displayed.
    Code:
    <html>
    <head>
    <title> Limit image display </title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=265733
    
    // var imgs = ["img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"];
    // var baseURL = '';
    var imgs =['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    
    var x=imgs.length;
    function change(){
      if (x>0) { document.getElementById("bob").src=baseURL+imgs[--x]; }
    }
    window.onload = function() { change(); }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <img src="" id="bob" alt="" onmousedown="change()">
    
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh thank you iBall and jmrker! Worked perfectly, thanks so much.


  •  

    Posting Permissions

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