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>

ids should be unique, but you can use classes multiple times. use different ids — Rachel Gallen
– Rachel Gallen, Commented Jul 14, 2017 at 23:27
you can still use getElementById but use the image id that's PASSED IN as an argument to isolate the image — Rachel Gallen
– Rachel Gallen, Commented Jul 14, 2017 at 23:28
Hello Rachel,Thank you for your response. How do I create different IDs? — user3227561
– user3227561, Commented Jul 14, 2017 at 23:29
in your html, just use different ids. name them differently. do they all have the same attributes(width/height etc)? if so use a class for this and then just use an id to name them — Rachel Gallen
– Rachel Gallen, Commented Jul 14, 2017 at 23:31
Sorry, do you mean something like this: <img class="theImage2"> — user3227561
– user3227561, Commented Jul 14, 2017 at 23:38

Joe B. · Accepted Answer · 2017-07-14 23:58:30Z

1

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.

answered Jul 14, 2017 at 23:58

Joe B.

1,1747 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3227561 Over a year ago

THANK YOU SO MUCH

Rachel Gallen Over a year ago

@user3227561 instead of posting a "thank you", accept the answer. stackoverflow.com/help/accepted-answer (just hover beside the answer and click)

Rachel Gallen Over a year ago

@JoeB. snap! (i upvoted your answer - like the codepen btw)

Joe B. Over a year ago

Thanks! I was thinking of reworking the function, but when your comment suggested passing the ID as an argument I figured the majority of the code could stay the same.

Rachel Gallen · Accepted Answer · 2017-07-14 23:58:14Z

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

Dracorex · Accepted Answer · 2017-07-14 23:31:35Z

0

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.

answered Jul 14, 2017 at 23:31

Dracorex

4096 silver badges22 bronze badges

1 Comment

Patrick Roberts Over a year ago

If you can provide documentation to support this, it would be a much better answer.

Justin Thyme · Accepted Answer · 2017-07-14 23:46:23Z

0

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.

answered Jul 14, 2017 at 23:46

Justin Thyme

191 silver badge2 bronze badges

1 Comment

user3227561 Over a year ago

var imgPath = ""; function swapImage(imgID) { var theImage = document.querySelectorAll('[id=theImage]'). var newImg; newImg = imgArray[imgID]; theImage.src = imgPath + newImg; } function swapImage(imgID) { var theImage = document.querySelectorAll('[id=theImage2]'). var newImg; newImg = imgArray[imgID]; theImage.src = imgPath + newImg; }

Collectives™ on Stack Overflow

Swap Images from Javascript Array

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related