simple image gallery using Javascript but it only show first image

Question

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!!

<html>
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
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;
}
</style>
<script>
window.onload = test;


 function test (){
    var right = document.getElementById("right");
    var list = document.getElementsByTagName("img");
    for(var i= 0;i<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);
}

</script>
</head>

<body>
    <div id="left">
        <ul id="menu">
            <li><img src="1.jpg"/></li>
            <li><img src="2.jpg"/></li>
            <li><img src="3.jpg"/></li>
            <li><img src="4.jpg"/></li>
            <li><img src="5.jpg"/></li>

        </ul>
    </div>
    <div id="right">

    </div>
</body>
</html>

You are not assigning `showPic()` and `hidPic()` as event handlers, you are *calling them immediately* and trying to assign their (undefined) return values as event handlers, similar to [this question](http://stackoverflow.com/questions/10101899/javascript-onclick-event-getting-called-automatically). Assuming you fix that, you also [need to be careful about assigning handlers in a loop](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). — nnnnnn, Jun 29 '16 at 01:59

score 0 · Accepted Answer · answered Jun 29 '16 at 02:29

Hi for JAvascript simple mouse hover change img in gallery try this

JS

function onHover(element)
{
document.getElementById("right").src= element.getAttribute('src');
}

HTML

<div id="left">
        <ul id="menu">
            <li><img src="http://www.w3schools.com/bootstrap/img_chania.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>

        </ul>
    </div>
    <img id ="right" src="http://www.w3schools.com/bootstrap/img_chania.jpg"/>

and for Jquery

Jquery

$(document).ready(function(){
  $("img").mouseout(function() {
  })
  .mouseover(function() {
console.log($(this))
  $("#right").attr('src' , $(this).attr("src"));
  });

});

HTML

<div id="left">
        <ul id="menu">
            <li><img src="http://www.w3schools.com/bootstrap/img_chania.jpg"/></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_chania2.jpg"/></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg"/></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower.jpg"/></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg"/></li>

        </ul>
    </div>
    <img id ="right" src="http://www.w3schools.com/bootstrap/img_chania.jpg"/>

for refrence https://plnkr.co/edit/8zthUijUQqQqyjoR7PMw

simple image gallery using Javascript but it only show first image

1 Answers1