asp.net - 如何为gridview中的图像添加缩略图和鼠标悬停？

Question

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

这是我的网格视图

<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

我会把图像放在里面而不是用于测试。为图像控件添加图像源，同时添加 css 类：

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

我会将鼠标悬停图像重命名为 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 更改为您希望它工作的任何其他文件类型。