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：Image标签，到目前为止，我的.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>

动态交换ASP.Net映像OnMouseOver事件

1 个答案: