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>