php img hover und display in einem anderen img-tag

Question

ich habe für eine lösung für alters jetzt scrollen und ich kann nicht scheinen, damit es funktioniert.

Ich versuche, eine Art von Bibliothek zu erstellen, wo Sie auf einem Symbol schweben können, während Sie das Bild im Bild-Tag anzeigen. Wie Sie aus dem Bild unten sehen können, gab meine PHP-Anweisung 2 Bilder auf der linken Seite zurück. und während ich schwebe, möchte ich, dass das verschobene Bild im großen img-Tag angezeigt wird. aber das Schweben funktioniert nicht.

Hier ist mein Javascript

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

Und hier ist mein PHP mysqli while-Schleife

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

und das ist die große img Vorschau

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

Ich habe viele Tricks ausprobiert, ich habe versucht, meinen eigenen Code zu erfinden. Ich habe im ganzen Netz gesucht, aber kein Glück. Was ich denke, ist möglicherweise, weil die generierten IDs innerhalb der Tags die gleiche ID haben, dass mein img Hover nutzlos ist. Vielleicht muss ich einen Weg finden, um jede generierte ID-Tags eine eindeutige ID und Aufruf und dann rufen Sie die ID dieses Tags, die in JavaScript "einzigartig" sein und dann die Funktion anwenden? Wenn das so ist, wie? Jeder Lebensretter, der mir helfen kann? Danke im Voraus! PHP und Javascript only..no CSS plz (es sei denn, es ist die einzige Hoffnung ... lol)

EDIT: Ich habe eine "Hardcoding" und es funktioniert, aber auch tho seine hardcoded ich will es nicht so funktionieren. Ich möchte maximal 5 Bilder anzeigen, weshalb ich eine Zählfunktion vor meiner while-Schleife in meinem PHP-Code habe. aber wenn ich kann einen besseren Weg finden, denke ich, im nur mit diesem unprofessionell hardscript Stick gehen 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

Nun meine Seite jetzt funktioniert. Die Antwort, die ich von Galcha erhielt, war die erste Sache, die ich je benutzt habe, also half es nicht wirklich. Nach einigem Nachdenken habe ich beschlossen, $(document).ready(function loading(elm) durch function loading(elm) zu ersetzen. So sieht mein Skript jetzt so aus

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

Jetzt nach der Verwendung funktioniert der Hover perfekt. ABER es zeigt nicht automatisch das erste Bild beim Laden der Seite an. Also habe ich meine while-Anweisung etwas modifiziert und jetzt sieht es so aus.

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

Jetzt funktioniert meine Seite perfekt. Incase Sie fragen, warum ich eine Zählung < 1 Aussage in meiner while-Schleife habe? Weil, wenn ich nur das $ imgcase im selectedimg src Code widerspreche, erhalte ich das letzte Bild src autodisplayed. Und ich wollte die erste. Deshalb habe ich gezählt < = 1, um den ersten Link zu erhalten und geben Sie dem ersten Link eine separate Variable und echo $ imgfirst in der selectedimg src.

Mein Code ist ein bisschen scrappy, aber ... es funktioniert, ich denke, lol.

Answer 2

Sie können nicht die ID als Selektor verwenden, um das img zu bekommen, denn es soll eindeutig sein.

Stattdessen in Ihrem Javascript, können Sie einen Verweis auf das Element übergeben, die das Laden() Funktion aufgerufen:

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>