php img hover и отображение в другой тег img

Question

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

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

Вот мой 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 в то время как петля

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

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

EDIT: Я сделал «Hardcoding», и он работал, но даже в его жестком кодексе я не хочу, чтобы он работал так. Я хочу отобразить max 5 изображений, поэтому у меня есть функция count перед моим циклом while в моем php-коде. но если я не могу найти лучший способ я думаю, что им просто буду придерживаться этой непрофессиональной hardscript лол

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

Ну моя страница работает в настоящее время. Ответ, который я получил от Galcha, был первым, что я когда-либо использовал, поэтому он действительно не помог. после некоторого размышления я решил заменить $(document).ready(function loading(elm) на function loading(elm). Итак, мой скрипт выглядит так:

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

Теперь, после использования этого наведения, работает идеально. НО это не автоматически отображает первое изображение при загрузке страницы. Поэтому я немного изменил свой оператор 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++; 
    } 
    } 

Теперь моя страница работает отлично. Если вы спросите, почему у меня есть счет < 1 в моем цикле while? Потому что, если я просто откликнул $ imgcase в выбранном коде src, я получу последнее изображение src autodisplayed. И я хотел первого. Вот почему я сделал счет < = 1, чтобы получить первую ссылку и дать первой ссылке отдельную переменную, а echo - $ imgfirst в selectedimg src.

Мой код немного лоскутный, но ... он работает, я думаю, lol.

Answer 2

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

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

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>