php img懸停並顯示到其他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 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' 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具有與我的img懸停相同的ID。 也許我需要找到一種方法來獲取每個生成的ID標記的唯一ID並調用，然后調用該標記的ID（在JavaScript中應為“唯一”），然后應用該功能？ 如果是這樣怎么辦？ 有什么救生員可以幫助我嗎？ 提前謝謝！ 僅PHP和Javascript..no CSS plz（除非唯一希望...大聲笑）

編輯：我做了一個“硬編碼”，它的工作，但即使它的硬編碼，我也不希望它像這樣工作。我想顯示最多5張圖片，這就是為什么在我的php代碼中的while循環之前我有一個count函數的原因。 但是，如果我找不到更好的方法，我想我只會堅持使用這種不專業的硬筆大聲笑

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

您不能將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>

Answer 2

好了，我的頁面現在可以正常工作了。 我從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++;
     }
    }

現在，我的頁面運行完美。 如果您問為什么我的while循環中有count <1條語句？ 因為如果我只是在selectedimg src代碼中回顯$ imgcase，我將自動顯示最后一個圖像src。 我想要第一個。 那就是為什么我進行計數<= 1以獲得第一個鏈接，並給第一個鏈接一個單獨的變量，然后在selectedimg src中回顯$ imgfirst的原因。

我的代碼有點雜亂無章，但是...我猜它能奏效。