前端代码：
JS代码
1 function Test(aa)
2 {
3 document.getElementById("img1").src ="Image/"+aa;
4 document.getElementById("div1").style.display='block';
5 document.getElementById("div1").style.position='absolute';
6 var x = event.clientX;
7 var y = event.clientY;
8 document.getElementById("div1").style.left = x;
9 document.getElementById("div1").style.top = y;
10 }
11 function Hide()
12 {
13 document.getElementById("div1").style.display='none';
14 }
页面源码
1 <div id ="div1" style="display:none;">
2 <img src ='' id="img1" width="150px" height="150px"/>
3 </div>
4 <div>
5 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
6 <Columns>
7 <asp:TemplateField HeaderText="头像">
8 <ItemTemplate>
9 <img src='Image/<%#Eval("ImagePath") %>' onmouseout="Hide()" onmouseover="Test('<%#Eval("ImagePath") %>')" width="70px" height="80px" />
10 </ItemTemplate>
11 </asp:TemplateField>
12 <asp:BoundField DataField="UserName" HeaderText="用户名" />
13 <asp:BoundField DataField="Age" HeaderText="年龄" />
14 <asp:BoundField DataField="Email" HeaderText="邮箱" />
15 <asp:BoundField DataField="Address" HeaderText="地址" />
16 </Columns>
17 </asp:GridView>
后台代码：
后台代码
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 if (!IsPostBack)
4 {
5 databind();
6 }
7 }
8 public void databind()
9 {
10 SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString());
11 SqlCommand cmd = new SqlCommand();
12 cmd.Connection = con;
13 cmd.CommandText = "Select * From T_Users";
14 SqlDataAdapter da = new SqlDataAdapter(cmd);
15 DataSet ds = new DataSet();
16 da.Fill(ds);
17 this.GridView1.DataSource = ds.Tables[0];
18 this.GridView1.DataKeyNames = new string[] { "id" };
19 this.GridView1.DataBind();
20 }