CODEWITHSUNDEEP
javascripthtmlarrays
user3227561
user3227561

Reputation: 29

Swap Images from Javascript Array

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>

Upvotes: 1

Views: 934

Answers (4)

Joe B.
Joe B.

Reputation: 1174

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.

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28563

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

Upvotes: 1

Justin Thyme
Justin Thyme

Reputation: 19

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 .srcs aren't getting swapped properly.

Upvotes: 0

Dracorex
Dracorex

Reputation: 369

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.

Upvotes: 0

Related Questions