Results 1 to 5 of 5

Thread: change image onclick loop

  1. #1
    Registered
    Join Date
    Nov 2015
    Location
    ita
    Posts
    3
    Rep Power
    0

    [SOLVED] same script on different cells, it works just the first one

    hi,
    I've created a script that chenge image at every click.
    that's it:
    HTML Code:
     <script type="text/javascript">
    imgs=Array("IMG_0550.JPG","minion.jpg","viola.jpg","pedina_red2.png","pedina_blue2.png","IMG_0550.JPG");
    var x=0;
    
    function change() {
    document.getElementById("bob").src=imgs[++x];
    
    if (x==5) {
    x=0;
    }
    }
          </script><img src="IMG_0550.JPG" id="bob" alt="visual game" style="width: 101px; height: 135px;" onmousedown="change()"><br>
    the problem is, I've created a table and on every cell there is this image with this script.
    but every image I click on it chenges just the first one.
    What can I do?
    Last edited by steoguitar; 11-24-15 at 02:06 PM. Reason: solved

  2. #2
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    My guess is that you're reusing id="bob" for each of those images/cells. IDs must be unique to the page. What's happening is that the script finds the first element with id="bob" and does what it's supposed to. How to fix? Pass the image's id to the script. Something like this should work:

    Code:
    <script type="text/javascript">
    imgs=Array("IMG_0550.JPG","minion.jpg","viola.jpg","pedina_red2.png","pedina_blue2.png","IMG_0550.JPG");
    var x=0;
    
    function change(el) {
    	el.src=imgs[++x];
    
    	if (x==5) {
    		x=0;
    	}
    }
    </script>
    
    <img src="IMG_0550.JPG" id="bob" alt="visual game" style="width: 101px; height: 135px;" onmousedown="change(this)"><br>
    <img src="IMG_0550.JPG" id="fred" alt="visual game" style="width: 101px; height: 135px;" onmousedown="change(this)">
    [etc.]
    Good luck,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  3. #3
    Registered
    Join Date
    Nov 2015
    Location
    ita
    Posts
    3
    Rep Power
    0
    thank You very much!
    I don't know javascript language... so I give some try...
    thank you again
    it works like a charm!

  4. #4
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    You are welcome! Glad it worked.

    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  5. #5
    Registered
    Join Date
    Nov 2015
    Location
    ita
    Posts
    3
    Rep Power
    0
    just another question:
    if I want to insert another list of images how I have to do?
    because if I do:
    HTML Code:
    <script type="text/javascript">
    imgs=Array("GREAT.JPG","minion.jpg","viola.jpg","pedina_red2.png","pedina_blue2.png","GREAT.JPG");
    var x=0;
    
    function change(el) {
    el.src=imgs[++x];
    
    if (x==5) {
    x=0;
    }
    }
    </script><img
    style="width: 100px; height: 134px;" alt="4 domande"
    src="file:///home/stefano/Immagini/gioco/GREAT.JPG" id="gavino"
    onmousedown="change(this)">
    it changes the images but it uses the list of the previous script (not GREAT.JPG but IMG_0550.JPG]


    Edit: I got it... I have to change imgs arrays with another name....

Posting Permissions

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