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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Netherlands
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why does this script not work for multiple images change onclick?

    Hello there! Is there somebody who can help me with the following code. I have a single index page, with a few images beside eachother. I have a few (image) buttons below and if i click them i want a specific image to change. I tried to find an example on the internet but i just can't get the right one i guess. I would be great if i can get some help, thank you in advance.

    Here is the script that i use now:

    <script>
    <!-- wiezijnwe -->
    if (document.images) {
    wiezijnwe = new Image();
    wiezijnwe.src = "afbeeldingen/index_13.gif";
    wiezijnwetekst = new Image();
    wiezijnwetekst.src = "afbeeldingen/wiezijnwe_13.gif";
    }

    imageURL="afbeeldingen/index_13.gif";

    function changeImage(){
    if (document.images){
    if (imageURL == "afbeeldingen/wiezijnwe_13.gif") imageURL = "afbeeldingen/index_13.gif";
    else imageURL = "afbeeldingen/wiezijnwe_13.gif";
    document.wiezijnwe.src = imageURL;
    }
    }

    <!-- watdoenwe -->
    if (document.images) {
    watdoenwe = new Image();
    watdoenwe.src = "afbeeldingen/index_14.gif";
    wwatdoenwetekst = new Image();
    watdoenwetekst.src = "afbeeldingen/watdoenwe_14.gif";
    }

    imageURL="afbeeldingen/index_14.gif";

    function changeImage(){
    if (document.images){
    if (imageURL == "afbeeldingen/watdoenwe_14.gif") imageURL = "afbeeldingen/index_14.gif";
    else imageURL = "afbeeldingen/watdoenwe_14.gif";
    document.watdoenwe.src = imageURL;
    }
    }
    </script>


    Here is the button with the onclick:

    <img ONCLICK="changeImage();" src="afbeeldingen/index_22.gif" width="83" height="40" alt="">

    And here is (one of) the image(s) that i want to change:
    <img id="index_13" src="afbeeldingen/index_13.gif" name="wiezijnwe" width="299" height="308" alt="">

    Now the code is actually working, but i added the "watdoenwe" image and now it's only changing that one when i click both of the buttons: wiezijnwe and watdoenwe. But what i'm looking for is when i click button wiezijnwe that image wiezijnwe changes en the same goes for watdoenwe.

    I'm looking forward to a reaction ,

    Brandon
    Last edited by brann_; 11-08-2011 at 09:08 PM.

  • #2
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, England
    Posts
    63
    Thanks
    1
    Thanked 14 Times in 14 Posts
    Hi brann_

    Your method is quite round-about.

    Firstly I should mention, that your <script> tag should declare the type attribute, and it should be:
    Code:
    <script type="text/javascript">
    Then basically, use a method like so:

    Code:
    function switchImage(imageId, newSrc)
    {
    document.getElementById(imageId).src = newSrc;
    }
    Then just call it whenever you want to switch an image.

    You simply pass it the ID you have assigned to the image you to change, and the path of the new image.
    Last edited by thesam101; 11-09-2011 at 05:24 PM.
    //Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//

  • Users who have thanked thesam101 for this post:

    brann_ (11-09-2011)

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Netherlands
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! I've just finished reading your message and i'm going to try it right away!

  • #4
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, England
    Posts
    63
    Thanks
    1
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by brann_ View Post
    Thank you! I've just finished reading your message and i'm going to try it right away!
    Just incase you copy and pasted it, i made a slight typo (which i fixed), in getElementById, it said, getElemtentById, but should getElementById
    //Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//


  •  

    Posting Permissions

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