多個changeImage實例

Question

希望有人能幫助我。我使用的JS圖像比較腳本顯示兩個圖像並排顯示，用戶可以比較它們。它的工作原理是這樣的：

<div id="container1"> 
<!-- The before image is first --> 
<img id="img" src=" http://placehold.it/400x200&text=1" /> 
<!-- The after image is last --> 
<img id="img-alt" src="http://placehold.it/400x200&text=2" /> 
</div> 

腳本拉動第一IMG作爲左圖像，而第二張圖片爲右圖像。我已經添加了兩個ID，因爲我已經設置了按鈕，並且我希望它們在兩側都更換圖像，因此兩個圖像不是靜態的，並且可以從縮略圖庫中選擇和比較多個圖像（根據用戶的選擇）。

我在這裏發現了一些代碼，這會影響左側的很好。我還添加了一個按鈕，可以讓左側改變。

<script type="text/javascript"> 
function changeImage(a) { 
    document.getElementById("img").src=a; 
} 
</script> 

和HTML：

Left side: 
<button onclick='changeImage("http://placehold.it/400x200&text=Left");'>Left</button> 
<button onclick='changeImage("http://placehold.it/400x200&text=Left2");'>Left2</button> 

現在，我想創建另一組按鈕，影響了「IMG-ALT」級如圖所示的滑塊HTML - 這會影響右邊。我對Javascript的知識有限，如果我用「document.getElementById（」img-alt「）添加另一個腳本。src = a;」右側沒有任何變化。基本上，我想影響右側像這樣的按鈕：

Right side: 
<button onclick='changeImage("http://placehold.it/400x200&text=Right");'>Right</button> 
<button onclick='changeImage("http://placehold.it/400x200&text=Right2");'>Right2</button> 

我怎麼能關聯這些按鈕影響「IMG-ALT」 ID（第二圖像）？

我希望這是有道理的。請讓我知道是否需要澄清任何事情。

謝謝！

Answer 1

我不太清楚，這是你能指望什麼，但請看看例子，我做了 - >jsfiddle

changeImage = function(elemId, source) { 
    document.getElementById(elemId).src=source; 
} 

<button onclick='changeImage("img-alt", "http://placehold.it/400x200&text=Right");'>Right</button> 
<button onclick='changeImage("img", "http://placehold.it/400x200&text=Left");'>Left</button>