Question

我一直在研究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>

Answer 1

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

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

Live DEMO

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

修改：

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

<强>的Javascript ：

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

Answer 3

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

Answer 4

假设您可以使用Jquery

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

此代码应该可以使用

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

Answer 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这样的库会让这里更容易......

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

5 个答案: