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

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"/>

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