<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Popup picture Page</title>
<script type="text/javascript">
function get_(div_)
{
div_=div_.id+"1";
document.getElementById(div_).style.display="block";
}
function get_1(div_)
{
div_=div_.id+"1";
document.getElementById(div_).style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridViewPicBox" runat="Server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Id" HeaderText="MovieId" />
<asp:BoundField DataField="Name" HeaderText="MovieName" />
<asp:TemplateField HeaderText="MovieDescription">
<ItemTemplate>
<asp:LinkButton ID="lnk" runat="server" Text="Picture" onmouseover="get_(this);"
onmouseout="get_1(this);" />
<div id="lnk1" runat="server" style="display: none; position: absolute; background-color: #FEFFB3;
width: 150px">
<p>
<strong>Image Name</strong></p>
<p>
<img src='<%#Eval("MovieImagePath")%>' runat="Server" id="ImgPopUp" /></p>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MouseOverGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridViewPicBox.DataSource = GetData();
GridViewPicBox.DataBind();
}
}
public DataSet GetData()
{
DataSet ds = new DataSet();
DataTable dt = new DataTable("Movie");
DataRow dr;
dt.Columns.Add(new DataColumn("MovieId", typeof(Int32)));
dt.Columns.Add(new DataColumn("MovieName", typeof(string)));
dt.Columns.Add(new DataColumn("MovieImagePath", typeof(string)));
for (int i = 1; i <= 5; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "MovieName" + i.ToString();
dr[2] = "~/images/"+i.ToString()+".jpeg";
dt.Rows.Add(dr);
}
ds.Tables.Add(dt);
Session["dt"] = dt;
return ds;
}
}
DataGrid Popup picture on mouse over event in ASP.Net
Hot on Web: