Javascript 如何通过单击其他图像更改div的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10189607/
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
how to change the image of div on click of other image
提问by Punhoon Khan
I have two image div in HTML i want that onclik of one image other image should change
我在 HTML 中有两个图像 div 我希望一个图像的 onclik 另一个图像应该改变
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
我希望在单击 option_image_one 时它应该更改 image_one 和 imagetwo 的图像
回答by DonCallisto
UPDATE
更新
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
这是对我有用的代码
回答by Donovant
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
它会工作。
回答by Gatekeeper
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage'(this should be some js function that you assign to onClick event on your first div)
最好的选择是给图像一些 id 然后做一些类似的事情document.getElementById('yourId').src='newimage'（这应该是你分配给第一个 div 上的 onClick 事件的一些 js 函数）
回答by Filype
You can try the following:
您可以尝试以下操作：
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
请注意，我已将 ID 添加到第二个image.
See the live example on this interactive HTML/JS editor
请参阅此交互式 HTML/JS 编辑器上的实时示例
回答by jazzytomato
div are useless
div 没用
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
回答by gimg1
If you could use jQuery it would be like this:
如果你可以使用 jQuery，它会是这样的：
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
要使用 jQuery，请通过在标题中包含以下内容来导入 jQuery 库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
回答by TechSpellBound
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
根据 Thomas 和 Filype 的回答，我建议使用 div，但将 onClick 用于 img 标签而不是 div 标签。
This is for future enhancement so that if you would like to add anything else to these divs.
这是为了将来的增强，以便如果您想向这些 div 添加任何其他内容。
回答by usman
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>
