設置位置，就好像不存在

Question

看不見的照片，我有以下HTML和JavaScript。有三個圖片和三個鏈接。點擊一個鏈接顯示一張圖片並隱藏另一張圖片。

This Works。但是，我喜歡它，因此在顯示圖片時，它會顯示爲其他兩張圖片不存在，而不是被推到頁面的某個位置。那可能嗎？

HTML

<div id="content"> 
    <div id="left"> 
    <a href="javascript:showImage('img1')">show image1</a> 
    <a href="javascript:showImage('img2')">show image2</a> 
    <a href="javascript:showImage('img3')">show image3</a> 
    </div> 

    <div id="right"> 
    <img id="img1" src="berlin.jpg" height="200px"/> 
    <img id="img2" src="london.jpg" height="200px"/> 
    <img id="img3" src="madrid.jpg" height="200px"/> 
    </div> 
</div> 

的JavaScript

function showImage(id) { 
    var images_id = new Array("img1", "img2", "img3"); 
    for (var i = 0; i < images_id.length; i++) { 
     setImageVisible(images_id[i], false); 
    } 
    setImageVisible(id, true); 
} 

function setImageVisible(id, visible) { 
    var img = document.getElementById(id); 
    img.style.visibility = (visible ? 'visible' : 'hidden'); 
} 

Answer 1

取而代之的是：

img.style.visibility = (visible ? 'visible' : 'hidden'); 

使用此：

img.style.display = (visible ? '' : 'none');