simple image gallery using Javascript but it only show first image
<p>I'm new to Javascript trying to make a image gallery. 
But my code only show first pic in right div. 
and it won't change though I used onmouseover. 
When I try to switch picture, it doesn't has any reaction.
Could anyone help me with it? Thank you!!   </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Image Gallery&lt;/title&gt;
&lt;style&gt;
body{
    margin:0;
    padding:0;
}

#menu li{
    list-style-type:none;

}

#menu li img{
    height:80px;
    width:100px;
}

#left {

    float:left;
    margin:30px;
}
#right{
    height:400px;
    widows:600px;
    float:left;
    margin:30px;
}
&lt;/style&gt;
&lt;script&gt;
window.onload = test;


 function test (){
    var right = document.getElementById("right");
    var list = document.getElementsByTagName("img");
    for(var i= 0;i&lt;list.length;i++){
        var img = list[i];
        list[i].onmouseover = showPic(list[i]);
        list[i].onmouseout = hidPic(list[i]);
    }
}

function showPic(obj){
    var right = document.getElementById("right");
    right.appendChild(obj);
}

function hidPic(obj){
    var right = document.getElementById("right");
    right.removeChild(obj);
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="left"&gt;
        &lt;ul id="menu"&gt;
            &lt;li&gt;&lt;img src="1.jpg"/&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="2.jpg"/&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="3.jpg"/&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="4.jpg"/&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="5.jpg"/&gt;&lt;/li&gt;

        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="right"&gt;

    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>