Javascript Image Links

Question

У меня есть 5 ссылок на изображения, которые будут отображать другое изображение внутри этого же идентификатора при нажатии на активную страницу. До сих пор все изображения меняли на одно изображение, но я хочу, чтобы они возвращались к исходному изображению, когда нажимали другую ссылку на изображение. Я понимаю, что могу сделать это с помощью HTML и CSS, но я хотел бы знать, как использовать JavaScript для этой функции.

Вот HTML:

<a href="#" onclick="changeImg(1)"><img src="images/tn_wolverine.jpg" id="imgBox1"></a> 
<a href="#" onclick="changeImg(2)"><img src="images/tn_wolverine.jpg" id="imgBox2"></a> 

Вот JavaScript:

function changeImg(ID) { 
    var obj = document.getElementById("imgBox"+ID).src="images/tn_wolverine2.jpg"; 

} 

Answer 1

Вы должны использовать флаг для записи индекс Lastest щелкнул изображения. Используйте этот индекс, чтобы вернуть изображение назад к исходному изображению, когда пользователь нажимает другое изображение. А затем замените флаг prev prev на новый.

Я написал простой "покер" пример: Live DEMO

HTML

<a href="#"> 
    <img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/> 
</a> 
<a href="#"> 
    <img class="poker" src="http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"/> 
</a> 

JavaScript

(function(){ 
    var pokers = document.getElementsByClassName("poker"),len=pokers.length,imgs=["http://pica.nipic.com/2007-10-16/20071016115825247_2.jpg","http://img.teapic.com/thumbs/201210/23/141801plfndrdzabzjdaok.jpg.middle.jpg"]; 
    var defaultImg = "http://pic1a.nipic.com/2009-03-03/200933143727699_2.jpg"; 
    var prevIndex = -1; 

    for(var i=0;i<len;i++){ 
    pokers[i].addEventListener("click",(function(index){ 
     return function(){ 
      //no action if user clicked the same poker 
      if(prevIndex===index) return; 
      if(prevIndex!==-1)pokers[prevIndex].src=defaultImg; 
      prevIndex = index; 
      this.src=imgs[index]; 
     }; 
    })(i)); 
    }; 

})();