Swap Images from Javascript Array

Question

I am coding a page with multiple image swaps. I want to swap two different images, however only one of them is currently working as the image iD is the same for all of the images.

I am not skilled in javascript and cannot seem to find a workaround. Any help would be much appreciated.

 var imgArray = new Array( '/en_us/local/page_specific/furniture/dining-rustique-main.jpg', '/en_us/local/page_specific/furniture/dining-rustique-main2.jpg', '/en_us/local/page_specific/furniture/dining-bonnie-main.jpg', '/en_us/local/page_specific/furniture/dining-bonnie-main2.jpg' ); var imgPath = ""; function swapImage(imgID, obj) { var theImage = document.getElementById('theImage'); var newImg; newImg = imgArray[imgID]; theImage.src = imgPath + newImg; obj.src = imgPath + imgArray; } function preloadImages() { for (var i = 0; i < imgArray.length; i++) { var tmpImg = new Image; tmpImg.src = imgPath + imgArray[i]; } } 

 <table cellspacing="0" cellpadding="3" width="100%"> <tr> <td rowspan="2"> <div id="image"><img id="theImage" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-bonnie-main.jpg"></td> <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-bonnie-gif.gif"></td> </tr> <tr> <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/trail-brown.jpg" onmouseover="swapImage(3)"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/trail-grey.jpg" onmouseover="swapImage(2)"></td> </tr> <tr> <td rowspan="2"> <div id="image"><img id="theImage" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-rustique-main.jpg"></td> <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-rustique-gif.gif"></td> </tr> <tr> <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-dark.jpg" onmouseover="swapImage(1)"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg" onmouseover="swapImage(0)"></td> </tr> </table> 

Answer 1

Your javascript is a bit messy.

You can do this more effectively using a tidy 'swap image' function that sets the src attribute like so:

 var i =0; function swapImage() { if (i == 0) { document.getElementById("myImage1").setAttribute('src', 'http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-dark.jpg'); i++; } else { document.getElementById("myImage1").setAttribute('src', 'http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg'); i--; } } 

 <img id="myImage1" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg" onclick="swapImage();" border="0" /> <!--or on mouseout, whatever--> 

You can adapt this function to create a second mouseover

Answer 2

You could also pass the id as an argument like Rachel had suggested. Just make sure you have different IDs.

  <img id="theImage">
  <img id="theImage2">

Just make sure you pass it as an argument

onmouseover="swapImage(3, 'theImage')"
onmouseover="swapImage(2, 'theImage')"
onmouseover="swapImage(1, 'theImage2')"
onmouseover="swapImage(0, 'theImage2')"

Here's the updated function

function swapImage(imgID, id) {
   var theImage = document.getElementById(id);
   var newImg = imgArray[imgID];
   theImage.src = imgPath + newImg;
   id.src = imgPath + imgArray[imgID];
}

Here's a codepen with it implemented.

Answer 3

An ID should not be used more than once in an HTML file, and as such, getElementById only gets one element. Use a class and the getQuerySelectorAll method instead.

Answer 4

Id attributes should be unique. If 2 elements have the same id, document.getElementById will only return the first 1. You should use the class attribute and document.getElementsByClassName .

If you are really unable to change this, you could use document.querySelectorAll('[id=theImage]') .

Also here you are adding an array to a string:

obj.src = imgPath + imgArray;

So your .src s aren't getting swapped properly.