Question

我正在编写一个包含多个图像交换的页面。我想交换两个不同的图像，但是其中只有一个当前正在工作，因为图像iD对于所有图像都是相同的。

我不熟悉javascript，似乎无法找到解决方法。任何帮助将非常感激。

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

你的javascript有点乱。

您可以使用整洁的交换图片更有效地完成此操作＆＃39;设置src属性的函数如下：

＆＃13;

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--;
  }
}

＆＃13;

<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-->

＆＃13;

您可以调整此功能以创建第二个鼠标悬停

Answer 2

您也可以将ID作为Rachel建议的参数传递。只需确保您有不同的ID。

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

请确保将其作为参数传递

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

这是更新后的功能

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

在HTML文件中不应多次使用ID，因此，getElementById只能获取一个元素。改为使用类和getQuerySelectorAll方法。

Answer 4

Id属性应该是唯一的。如果2个元素具有相同的ID，document.getElementById将只返回第一个1.您应该使用class属性和document.getElementsByClassName。

如果您确实无法更改此设置，可以使用document.querySelectorAll('[id=theImage]')。

此外，您还要在字符串中添加数组：

obj.src = imgPath + imgArray;

所以你的.src没有正确交换。

从Javascript数组中交换图像

4 个答案: