Question

我有gridview，因为images表中的值是ID, Images列。当从数据库中检索所有图像时，我必须在将光标移动到图像上时看到缩略图查看大尺寸的特定图像。

这是我的gridview

<Columns>
   <asp:BoundField HeaderText="ID" />
   <asp:TemplateField HeaderText="Images" >
      <EditItemTemplate>
          <asp:Image ID="Image1" runat="server" Text='<%# Bind("images") %>'/>
      </EditItemTemplate> 
    </asp:TemplateField>
</Columns>

Answer 1

我会把Image放在里面而不是测试。将图像源添加到图像控件，还添加css类：

<asp:Image ID="Image1" runat="server" Text='<%# Bind("images") %>' CssClass="myimage" src="Image/normal.jpg"/>

我会将mouseover图像重命名为normalimagename + over，即normalover.jpg“。现在我将jquery脚本块添加到我的页面的头部，就在我的jquery包含脚本之下：

<script type="text/javascript" src="Scripts/jquery-1.8.1.js"></script>    
    <script type="text/javascript">
        $(document).ready(function () {
            $("img.myimage").hover(function () {
                var src = $(this).attr("src").match(/[^\.]+/) + "over.jpg";
                $(this).attr("src", src);
            },
function () {
    var src = $(this).attr("src").replace("over", "");
    $(this).attr("src", src);
});
        });
</script>

它仅适用于.jpg。将“over.jpg”中的.jpg更改为您希望其工作的任何其他文件类型。

如何在gridview中添加缩略图和鼠标悬停到图像？

1 个答案: