php img hover and display into a different img tag

Question

i have been scrolling for a solution for ages now and i cant seem to make it work.

i am trying to make some sort of library where u can hover on an icon while hovering it displays that image into image tag. as you can see from the image below my php statement returned 2 images at the left. and while hovering i want the hovered image to display in the big img tag. but hovering is not working.

Here is my javascript

    <script type="text/javascript">
        //imageview
        $(document).ready(function loading(){
        var getimg = document.getElementById("icoimg").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        });
    </script>

And here is my php mysqli while loop

  $count = 1;
  if($count <= 6){
  while($row = mysqli_fetch_array( $query )) {
    $imgcase = $row['Showcase_Image'];
    $itemname = $row['Product_Name'];
    $itemid = $row['Product_ID'];
    echo "<div class='imgico' id='imgico'><img id='icoimg' name='icoimg' src=$imgcase onmouseover='loading();' /></div></br>";
    $count++;
 }
}

and this is the big img preview

<div class="imgprev" id="imgprev" width="460" height="300"><img id="selectedimg" width="460" height="300" /></div>

I have tried numerous tricks i tried inventing my own code. I searched all over the net but no luck. What i am thinking is MAYBE because the generated id's inside the tags have the same ID that maybe my img hover is useless. Maybe i need to find a way to get each generated id tags a unique id and call and then call that tag's id which should be "unique" in javascript and then apply the function? if so how? Any lifesaver that can help me? Thx in advance! Php and Javascript only..no CSS plz(unless its the only hope...lol)

EDIT: I did a "Hardcoding" and it worked but even tho its hardcoded i dont want it to work like this.I want to display max 5 images which is why i have a count function before my while loop in my php code. but if i cant find a better way i think im just going to stick with this unprofessional hardscript lol

if($count <= 6){
while($row = mysqli_fetch_array( $query )) {
    $imgcase = $row['Showcase_Image'];
    $itemname = $row['Product_Name'];
    $itemid = $row['Product_ID'];
    echo "<div class='imgico' id='imgico'><img id=$count name='icoimg' src=$imgcase onmouseover='loading$count();' /></div></br>";
    $count++;



    function loading1(){
        var getimg = document.getElementById("1").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading2(){

        var getimg = document.getElementById("2").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading3(){
        var getimg = document.getElementById("3").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading4(){
        var getimg = document.getElementById("4").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading5(){
        var getimg = document.getElementById("5").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };


        echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";

Answer 1

You can't use the id as the selector to get the img, because it is supposed to be unique.

Instead, in your javascript, you can pass a reference to the element that called the loading() function :

echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";

<script type="text/javascript">
        //imageview
        $(document).ready(function loading(elm){
        var getimg = elm.getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        });
</script>

Answer 2

Well my page works now. The answer i received from Galcha was the first thing i ever used so it didnt really help. after some thinking i decided to replace $(document).ready(function loading(elm) with function loading(elm) . So my script looks like this now

function loading(elm){
 var getimg = elm.getAttribute("src");
 document.getElementById("selectedimg").src = getimg;
}

Now after using this the hover works perfect. BUT it does not auto display the first image on page load. So i modified my while statement a bit and now it looks like this.

$count = 1;
    if($count <= 6){
    while($row = mysqli_fetch_array( $query )) {
        $imgcase = $row['Showcase_Image'];
        $itemname = $row['Product_Name'];
        $itemid = $row['Product_ID'];
        echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";
        if($count <= 1){
            $imgfirst = $imgcase;
        }
        $count++;
     }
    }

Now my page works perfectly. Incase you ask why i have a count <1 statement in my while loop? Because if i just echo the $imgcase in the selectedimg src code i will get the last image src autodisplayed. And i wanted the first one. Thats why i made a count <=1 to get the first link and give the first link a seperate variable and echo's $imgfirst in the selectedimg src.

My code is a bit scrappy but...it works i guess lol.