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> 

我尝试了很多技巧，我尝试发明自己的代码。我在网上搜索，但没有运气。我在想的是MAYBE，因为生成的ID在标签内有相同的ID，也许我的IMG悬停是无用的。也许我需要找到一种方法来获得每个生成的id标签一个唯一的id和调用，然后调用该标签的id应该是“唯一”在JavaScript中，然后应用函数？如果是的话如何？ 任何可以帮助我的救生员？ Thx提前！ PHP和Javascript只..没有CSS PLZ（除非它唯一的希望...大声笑）

编辑：我做了一个“硬编码”，它的工作，但即使是它的硬编码我不希望它像这样工作。我想显示最多5个图像，这就是为什么我的php代码中我的while循环之前有一个计数函数。但如果我不能找到一个更好的办法，我想我只是要坚持这个外行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收到的答案是我第一次使用，所以它没有真正的帮助。经过一番思考，我决定用function loading(elm)代替$(document).ready(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循环中有一个计数< 1声明？ 因为如果我只是在selectedimg src代码中回显$ imgcase，我会得到最后一个图像src autodisplayed。我想要第一个。这就是为什么我计数< = 1得到第一个链接，并在selectedimg src中给第一个链接一个单独的变量和echo的$ imgfirst。

我的代码有点拼凑，但是......它工作我猜大声笑。

Answer 2

你不能使用id作为选择，以获得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>