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

[brann_]

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

[thesam101]

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:

<script type="text/javascript">

Then basically, use a method like so:

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.

[brann_]

Thank you! I've just finished reading your message and i'm going to try it right away!

[thesam101]

Originally Posted by brann_

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