php img наведите указатель мыши и отобразите в другой тег img

я скроллинг для решения для возрастов теперь, и я не могу, кажется, сделать его работать.

я пытаюсь сделать какую-то библиотеку, где u может зависать на иконке при наведении курсора он отображает это изображение в тег изображения. как вы можете видеть из изображения ниже мой php оператор возвращается 2 изображения слева. и во время зависания я хочу, чтобы зависшее изображение отображалось в большом теге img. но парение не работает.

imgpreview

Вот мой javascript

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

А вот мой php mysqli в то время как 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++;
 }
}

и это большой просмотр img

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

Я пробовал множество трюков, я пытался изобрести свой собственный код. Я обыскал всю сеть, но безуспешно. То, что я думаю, может быть, потому, что генерируемые id внутри тегов имеют тот же ID, что, возможно, мой img hover бесполезен. Может быть, мне нужно найти способ, чтобы получить каждый сгенерированный ID теги уникальный идентификатор и вызов, а затем вызвать идентификатор этого тега, который должен быть «уникальным» в javascript, а затем применить функцию? если да, то как?
Любой спаситель, который может помочь мне? Thx заранее!
Php и Javascript только..нет CSS plz (если его единственная надежда…лол)

EDIT: I did a «Hardcoding» and it worked but even Tho its hardcoded i dont want it to work like this.Я хочу отображать максимум 5 изображений, поэтому у меня есть функция count перед моим циклом while в моем коде php. но если я не могу найти лучший способ, я думаю, что я просто буду придерживаться этого непрофессионального 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>";

2 ответа

  1. Вы не можете использовать id в качестве селектора для получения img, потому что он должен быть уникальным.

    Вместо этого в javascript можно передать ссылку на элемент, вызывающий функцию loading () :

    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>
    
  2. Ну моя страница работает сейчас.
    Ответ, который я получил от Galcha, был первым, что я когда-либо использовал, поэтому это не очень помогло. после некоторого раздумья я решил заменить $(document).ready(function loading(elm)на function loading(elm). Теперь мой сценарий выглядит так

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

    Теперь после использования этого hover работает идеально. Но он не автоматически отображает первое изображение при загрузке страницы. Поэтому я немного изменил свой оператор while, и теперь это выглядит так.

    $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++;
         }
        }
    

    Теперь моя страница работает отлично. В случае, если вы спросите, почему у меня есть граф
    Потому что если я просто эхо $imgcase в коде selectedimg src, я получу последнее изображение src autodisplayed. И я хотел первый. Вот почему я подсчитал

    Мой код немного неряшлив, но … он работает, я думаю, lol.