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>