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>