在鼠标悬停时显示图片

Question

我有一个ASP.NET页面，其中在Gridview控件中显示产品。 当用户将鼠标悬停在产品名称上时，将出现一个窗口，并在其中显示该产品的图片（通过获取产品ID并查找与其相关的图像）。

有AJAX控件或类似的东西吗？

Answer 1

有多种方法可以完成此操作，但是通常我将其视为具有图像标签的项目上的“工具提示”，该标签指向返回图像的aspx页面。 或直接图片。

这是我的第一个选择的例子

<img src="http://www.mysite.com/GenerateProductImage.aspx?productId=1" alt="My Product" />

为此，您必须创建GenerateProductImage.aspx页面，并将响应类型设置为image，使其仅返回图像。

这是一个CSS ToolTip演示，它将帮助您开始使用样式部分

Answer 2

我制作了一个包含很多小图片的网站。 当您将鼠标悬停在它们上面时，它们会在页面顶部大显示。 我用了这段jQuery：

$(document).ready(function () {
    $(".picture").hover(function () {
        var src = $(this).attr("src");
        var max_size = 200;
        $("#img").attr("src", src);
    });
});

Answer 3

您有几种选择。 您可以使用jQuery工具提示插件 ，也可以尝试使用Ajax Control Toolkit HoverMenu