在mouseover上顯示圖片

Question

我有一個ASP.NET頁面，我在Gridview控件中顯示產品。當用戶將鼠標懸停在產品名稱上時，應出現一個窗口並顯示產品的圖片（通過獲取產品ID並找到相關圖像）。

是否有AJAX控件或類似的東西？

Answer 1

有很多方法可以完成，但通常我會將其視爲具有圖像標記的項目的「工具提示」，該項目指向返回圖像的aspx頁面。或直接圖像。

這是我的第一選擇

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

對於此的一個例子，你就必須創建GenerateProductImage.aspx頁面，並設置響應類型是圖像，讓它只返回圖像。

這裏是一個CSS ToolTip演示，將幫助您開始使用造型件

Answer 2

你有幾個選擇。你可以使用jQuery tooltip plugin或者你可以嘗試Ajax Control Toolkit HoverMenu

Answer 3

我做了很多小圖片的網站。當你對它們進行挖掘時，它們在頁面頂部顯示出來很大。我用這件jQuery：

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