Javascript获取图像源并注入另一个图像源答案

【问题标题】：Javascript get image source and inject into another image sourceJavascript获取图像源并注入另一个图像源
【发布时间】：2013-07-02 16:01:57
【问题描述】：

我一直在开发一个 Javascript 照片库，我希望它对用户非常友好。这仅涉及必须使用一张图像和每张图像一个链接。我有它，所以所有图像都出现在左侧的滚动 div 中，并且 onClick 假设更改右侧的图像源但我似乎无法获取 javascript 从原始图像获取图像源并更改第二个一个与它。我尝试了其他几种方式，但这是我喜欢的方式，如果我能让它发挥作用，那就太完美了。

这是在一个表格内，所以它的对齐方式不同我只是提供所需的代码。

此代码在下面给出，但似乎他删除了他的答案。我觉得你比我亲近很多！

Javascript：

<script type="Text/javscript">

function setImage(this) {
    document.getElementById("ImageFrame").src = this.childNodes[0].src;
}

</script>

休息

    <div style="width:275;height:400;overflow-x:scroll;">

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0421.jpg" /></a>

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0422.jpg" /></a>

     <a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0423.jpg" /></a>

</div>

正在更改的图像。

    <div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>

【问题讨论】：

标签： javascript html image

【解决方案1】：

这是一个工作示例。 NOTE: a.getElementsByTagName('img')[0].src 因为不同的浏览器会在子标签之前和之后添加节点到标签。 It is safe to use getElementsByTagName('img')[0].src

<html>
    <head>
    <script type="text/javascript">
    function setImg(a){
          //alert(a.getElementsByTagName('img')[0].src);
              document.getElementById('ImageFrame').src = 
                          a.getElementsByTagName('img')[0].src
            }
        </script>
    </head>
    <body>
    <a href="#" onclick="setImg(this);"><img src="JCF/PICT0421.jpg"></a>

        <div>
           <img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
        </div>
    </body>
</html>

【讨论】：

取消注释警报并检查消息。它应该为您显示正确的 img 源。这对我来说很好。 Do not use obj.childNode[0] as 0th node will not be always an img tag. It depends on the browser.
好吧，这一定是我，因为即使是 javascript 警报也不适合我，我知道我正确地输入了这个。
将此完整答案复制到记事本，将 img.src 更改为现有文件名，然后另存为 html 文件。看看它是否这样工作。另请注意我的函数名称是SetImg()

【解决方案2】：

var pic1 = document.getElementById("image1"); 
var src = pic1.src;  // here is the src for image1

var pic2 = document.getElementById("image2"); 
pic1.src = src;  // here we set the src for image2

所以这段代码将从 image1 中获取图像 src 并将其放入 image2 中。

【讨论】：

我知道该怎么做，这是大多数人会做的，在我的情况下，我为了简单起见而不必制作单独的函数，每个 onClick 中只有一个通用代码.

【解决方案3】：

我相信这样的事情应该适合你：

HTML：

<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="image1.jpg" /></a>

Javascript：

function setImage(imgParent) {
    document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}

Live DEMO

当您实际加载图像时，演示会更好地工作。但是，如果您检查损坏的图像，您可以看到它正确加载到新图像中。

编辑：

由于 Kaf 提到他遇到了 childNodes 的问题，您可能想试试这个：

Javascript：

function setImage(imgParent) {
    document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}

【讨论】：

删除这个并用其他东西替换它，比如我的例子中的 imgParent 。否则它会抛出一个 javascript 错误。我认为它可以解决这个问题，但我错了。这就是为什么我最初删除了我的答案。 :P
现场演示似乎也不起作用。我检查了代码的来源，图像没有改变。
糟糕，我在错误的演示中链接。现在已修复。上面发布的代码可以正常工作。
它确实有效！现在让我们看看我是否可以在我的页面上使用它。
@JoshMein 从我过去的经验来看，使用imgParent.childNodes[0].src 并不安全，正如我在回答中提到的那样。

【解决方案4】：

假设你可以使用 Jquery

$('.imageClass').click(function(){
    var srcToCopy = $(this).attr('src');
    $(somewheretoputsrc).attr('src', srcToCopy);
})

这段代码应该可以工作

edit ：使用工作图像编辑的小提琴 http://jsfiddle.net/jbduzan/b7adx/1/

【讨论】：

我可以把它作为一个 onclick 函数吗？因为是的，我可以使用 jQuery。
有几种方法可以做到这一点，将相同的类添加到您的图像中，或者创建一个将 2 行包装在 click 函数内的函数并使用 onClick 函数调用它。我更喜欢我在 jsFiddle 上使用的方法

【解决方案5】：

您应该使用所谓的“Unobtrusive JavaScript”，即不要将内容与 JavaScript 混合，并在加载窗口后应用所需的行为。类似的东西：

function addDomListener(element, eventName, listener) {
  if (element.addEventListener) // most browsers
    element.addEventListener(eventName, listener, true);
  else if (element.attachEvent) // IE
    element.attachEvent('on' + eventName, listener);
}
window.onload = function() {
  var elements = getElementsByClassName('thumb-link');
  for (int i=0; i < elements.size(); i++) {
    var el = elements[i];
    addDomListener(el, "click", function () {
      setImage(el);
    });
  }
}

getElementsByClassName 在这里仍然需要一个实现，并且每个以前具有 onlick 的标签都需要类“thumb-link”。但我相信你会明白的。

使用像 jQuery 或 Prototype.js 这样的库会更容易...

【讨论】：