javascript Javascript获取图像源并注入另一个图像源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10600828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript get image source and inject into another image source
提问by Spencer May
I've been working on a Javascript photo gallery and I want it to be very user-friendly. This involves only having to use one image and one link per image. I have it so all the images appear in a scrolling div on the left and onClick it is suppose to change the image source on the right but I can't seem to get javascript to get the image source from the original image and change the second one with it. I've tried a few other ways but this is the way I like and if I could get it to work it would be perfect.
我一直在开发一个 Javascript 照片库，我希望它非常用户友好。这涉及只需使用一张图像和每张图像一个链接。我有它，所以所有图像都出现在左侧的滚动 div 中，并且 onClick 假设更改右侧的图像源，但我似乎无法使用 javascript 从原始图像中获取图像源并更改第二个一个与它。我尝试了其他一些方法，但这是我喜欢的方式，如果我能让它工作，那就太完美了。
This is inside a table so it is align differently I'm just giving the code needed.
这是在一张桌子里面，所以它的对齐方式不同，我只是给出了所需的代码。
This code was given below but it seems as though he deleted his answer. I think you were much close than me!
下面给出了这段代码，但似乎他删除了他的答案。我觉得你比我亲近多了！
Javascript:
Javascript：
<script type="Text/javscript">
function setImage(this) {
document.getElementById("ImageFrame").src = this.childNodes[0].src;
}
</script>
break
休息
<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>
The image being changed.
正在更改的图像。
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
回答by Farhan Ahmad
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
So this code will take the image srcfrom image1 and put it in image2.
所以这段代码src将从image1中获取图像并将其放入image2中。
回答by Josh Mein
I believe something like this should work for you:
我相信这样的事情应该适合你：
HTML:
HTML:
<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="image1.jpg" /></a>
Javascript:
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}?
The Demo will work better when you actually load in images. However, if you inspect the broken images, you can see that it is loading in the new image correctly.
当您实际加载图像时，演示会更好地工作。但是，如果您检查损坏的图像，您可以看到它正确加载到新图像中。
Edit:
编辑：
Since Kaf mentioned that he has had issues with childNodes, you may want to try this out instead:
由于 Kaf 提到他有 childNodes 的问题，你可能想试试这个：
Javascript:
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}?
回答by Kaf
here is a working example. NOTE: a.getElementsByTagName('img')[0].srcas different browsers would add nodes to tag before and after the child tag. It is safe to use getElementsByTagName('img')[0].src
这是一个工作示例。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>
回答by jbduzan
assuming you can use Jquery
假设您可以使用 Jquery
$('.imageClass').click(function(){
var srcToCopy = $(this).attr('src');
$(somewheretoputsrc).attr('src', srcToCopy);
})
this code should work
这段代码应该可以工作
edit : fiddle edited with working image http://jsfiddle.net/jbduzan/b7adx/1/
编辑：用工作图像编辑的小提琴 http://jsfiddle.net/jbduzan/b7adx/1/
回答by Lincoln
You should go with so called "Unobtrusive JavaScript", i.e. don't mix content with JavaScript and apply the desired behaviors after the window has been loaded. Something like that:
您应该使用所谓的“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 still needs an implementation here and every a tag that had onlick previously needs the class 'thumb-link'. But I'm sure you'll figure that out.
getElementsByClassName 在这里仍然需要一个实现，并且每个以前有过onlick 的标签都需要类“thumb-link”。但我相信你会明白这一点的。
Using a library like jQuery or Prototype.js would make it easier here...
使用像 jQuery 或 Prototype.js 这样的库会让这里更容易......
