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的原因。

我的代码有点杂乱无章，但是...我猜它能奏效。