Making a small Popup picture on mouse over event

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MouseOverGrid.aspx.cs" Inherits="MouseOverGrid" %>  

<!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>Untitled 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="GridView1" runat="Server" AutoGenerateColumns="False">  
              <Columns>  
                  <asp:BoundField DataField="Id" HeaderText="Id" />  
                  <asp:BoundField DataField="Name" HeaderText="Name" />  
                  <asp:TemplateField HeaderText="Description">  
                      <ItemTemplate>  
                          <asp:LinkButton ID="lnk" runat="server" Text="Details" 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("ImagePath")%>' runat="Server" id="A" /></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)  
        {  
            GridView1.DataSource = GetData();  
            GridView1.DataBind();  
  
        }  
    }  
    public DataSet GetData()  
    {  
        DataSet ds = new DataSet();  
        DataTable dt = new DataTable("Movie");  
        DataRow dr;  
        dt.Columns.Add(new DataColumn("Id", typeof(Int32)));  
        dt.Columns.Add(new DataColumn("Name", typeof(string)));  
        
        dt.Columns.Add(new DataColumn("ImagePath", typeof(string)));  
        for (int i = 1; i <= 5; i++)  
        {  
            dr = dt.NewRow();  
            dr[0] = i;  
            dr[1] = "Name" + i.ToString();  
            dr[2] = "~/images/sa2.jpeg";  
            dt.Rows.Add(dr);  
        }  
        for (int i = 1; i <= 5; i++)  
        {  
            dr = dt.NewRow();  
            dr[0] = i;  
            dr[1] = "Name" + i.ToString();  
            dr[2] = "~/images/pdf-icon.jpg";  
            dt.Rows.Add(dr);  
        }  
        ds.Tables.Add(dt);  
        Session["dt"] = dt;  
        return ds;  
    }  
}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru