0

我一直在开发一个 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>
4

5 回答 5

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

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

于 2012-05-15T12:42:50.537 回答
1

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

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;
}​
于 2012-05-15T12:48:02.270 回答
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>
于 2012-05-15T13:01:24.370 回答
0

您应该使用所谓的“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 之类的库会让这里变得更容易......

于 2012-05-15T13:42:49.877 回答
0

假设你可以使用 Jquery

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

这段代码应该可以工作

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

于 2012-05-15T13:10:26.503 回答