0

我正在尝试创建一个 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);

但是我不知道在哪里采取它。代码肯定不完整，我被卡住了。任何帮助将不胜感激。谢谢！

4

1 回答 1

0

如果您使用 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>
于 2013-05-10T21:15:39.713 回答