html图像点击事件以条件方式加载图像

Question

我已经在html中添加了四个图像，我希望图像在点击图像时加载占位符中的另一图像。如果第一张图像被点击，它会加载图像a，如果另一个图像被点击，他们会加载另一个图像后点击这四个图像中的任何一个链接想要被禁用我已经使用此代码，但它不起作用，请帮助我要做到这一点在此先感谢..

<a href="#" onclick="document.getElementById('aswT'). \t src='right.gif' ;">  
 
     <img src="m.jpg" id="right" /></a> 
 
     <a href="#" onclick="document.getElementById('aswT'). \t src='wrong.gif' ;">  
 
     <img src="e.jpg" id="wrong" /></a> 
 
     <a href="#" onclick="document.getElementById('aswT'). \t src='wrong.gif' ;">  
 
     <img src="o.jpg" id="wrong" /></a> 
 
     <a href="#" onclick="document.getElementById('aswT'). \t src='wrong.gif' ;">  
 
     <img src="n.jpg" id="wrong" />

Answer 1

您是否需要这样的事？ http://codepen.io/anon/pen/jbeZPp

function changeImage(arg) { 
 
if(document.getElementById('imagePlaceholder').src == arg.target.src) { 
 
document.getElementById('imagePlaceholder').src = "http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png"; 
 
} else { 
 
document.getElementById('imagePlaceholder').src = arg.target.src; 
 
} 
 
}

#imageLinks a img {width:100px;height:100px;margin:15px;} 
 
#imagePlaceholder {width:300px;height:300px;margin:15px;}

<img id="imagePlaceholder" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png" /> 
 
<div id="imageLinks"> 
 
    <a href="#" onclick="changeImage(event);"><img src="https://pbs.twimg.com/profile_images/1239356116/TwitterBirdCool_400x400.JPG" /></a> 
 
    <a href="#" onclick="changeImage(event);"><img src="http://www.kampfkunst-centrum.de/assets/images/Cool-Kids.jpg" /></a> 
 
    <a href="#" onclick="changeImage(event);"><img src="http://img02.deviantart.net/9dd3/i/2012/345/e/7/cool_and_wild_cat_by_design_by_humans-d5nqtl8.jpg" id="wrong" /></a><a href="#" onclick="changeImage(event);"><img src="https://pbs.twimg.com/profile_images/579982585138405378/daYox4Wy.jpg" /></a> 
 
</div>