Javascript 获取图像源并注入到另一个图像源中

Javascript get image source and inject into another image source

本文关键字：图像 另一个 获取 Javascript 注入      更新时间：2023-09-26

我一直在做一个Javascript照片库，我希望它非常用户友好。这涉及只需要使用一个图像和每个图像一个链接。我有它，所以所有图像都出现在左侧的滚动div 中，然后单击它应该更改右侧的图像源，但我似乎无法让 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>

这是一个工作示例。 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>

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

因此，此代码将从图像 1 中获取图像src并将其放入图像 2 中。

我相信

这样的东西应该适合你：

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

现场演示

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

编辑：

由于Kaf提到他在childNodes上遇到了问题，你可能想尝试一下：

Javascript：

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

假设你可以使用 Jquery

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

此代码应该有效

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

你应该使用所谓的"不显眼的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会更容易在这里...

相关文章：