Question

我正在嘗試創建一個onmosueover事件，以便在將鼠標懸停在其上時將圖片從一個圖像更改爲另一個圖像。我知道如何在ASPX做到這一點，我不喜歡的東西如下：

<td style="display: block; width: 320px;" valign="top"> 
      <img style="margin: 3px; border: 0px solid #000000;" src='/Shop/Images/2.jpg' alt="Robot Kit" width="303px" id="previewImg" /> 
      <br /> 
      <table cellpadding="0" cellspacing="6"> 
      <tr> 
       <td> 
       <img src='1.jpg' style="width: 70px; border: 1px solid #e8e8e8;" onmouseover="document.getElementById('previewImg').src='1.jpg';" onmouseout="document.getElementById('previewImg').src='2.jpg';" /> 
       </td> 
       <td> 
       <img src='head.jpg' style="width: 70px; border: 1px solid #e8e8e8;" onmouseover="document.getElementById('previewImg').src='head.jpg';" onmouseout="document.getElementById('previewImg').src='2.jpg';" /> 
       </td> 
      </tr> 
      </table> 

現在我試圖使它的動態，我從數據庫中提取的圖像參考號碼。我使用的ASP：圖片標籤，到目前爲止，我有這樣的事情在我的.cs頁面如下：

imgItem.ImageUrl = string.Format("Images/{0}.jpg", id); 
    imgItem.Width = new Unit(150, UnitType.Pixel); 

    imgItem.Attributes.Add("onmouseover", "javascript:swapImageIn('Shop/Images/3.JPG');return true;"); 
    imgItem.Attributes.Add("onmouseout", "javascript:swapImageOut('imgItem');return true;"); 

    imgItem2.ImageUrl = string.Format("Images/{0}.jpg", 3); 
    imgItem2.Width = new Unit(150, UnitType.Pixel); 

但是我不知道在哪裏把它形成在這裏。代碼絕對不完整，我被卡住了。任何幫助將不勝感激。謝謝！

Answer 1

如果您使用jQuery而不是javascript，這會容易得多。

以下代碼將mouseover和mouseout事件都附加到圖像上。然後在事件觸發時替換圖像。

如果需要，您可以從代碼後面設置ImageUrl。

<style type="text/css"> 
    .container img { width: 100px; } 
</style>  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".container img").mouseover(function() { 
      $("#<%= LargeImage.ClientID %>").attr("src", $(this).prop('src')); 
    }).mouseout(function() { 
     $("#<%= LargeImage.ClientID %>").attr("src", 
      "http://placehold.it/400x400&text=Image1"); 
    }); 
}); 
</script> 

<asp:Image ID="LargeImage" ImageUrl="http://placehold.it/400x400&text=Image1" 
    runat="server" /> 
<div class="container"> 
    <asp:Image ID="Image1" ImageUrl="http://placehold.it/400x400&text=Image2" 
     runat="server" /> 
    <asp:Image ID="Image2" ImageUrl="http://placehold.it/400x400&text=Image3" 
     runat="server" /> 
    <asp:Image ID="Image3" ImageUrl="http://placehold.it/400x400&text=Image4" 
     runat="server" /> 
    <asp:Image ID="Image4" ImageUrl="http://placehold.it/400x400&text=Image5" 
     runat="server" /> 
</div>