Introduction: In this article I will explain how we
can Show large image on mousehover using JavaScript in asp.net
Description:
In the previous article I have explained Create Temporary tabledynamically in
asp.net, Encrypt and Decrypt the connection String
in Web.Configfile in asp.net and Create Temporary tabledynamically and bind to Gridview in asp.net .
Html Markup Of page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<style>
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
img{
border:0px;
box-shadow:
2px 2px 3px #555562;
width:500px;
height:333px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grduser" runat="server" AutoGenerateColumns="false">
<HeaderStyle Font-Bold="true"/>
<Columns>
<asp:BoundField DataField="UserId" HeaderText="Id" ItemStyle-Width="30" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="UserName" HeaderText="UserName" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField HeaderText="Profile Image">
<ItemTemplate>
<asp:HyperLink ID="hlimg" runat="server" NavigateUrl='<%#Eval("Profileimage") %>' class="preview" >
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("Profileimage") %>' Width="150px" Height="150px" />
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
imagePreview();
});
this.imagePreview
= function () {
xOffset = -20;
yOffset = 40;
$("a.preview").hover(function (e) {
this.t
= this.title;
this.title
= "";
var
c = (this.t != "")
? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='" + this.href + "'
alt='Image preview' />" + c + "</p>");
$("#preview")
.css("top",
(e.pageY - xOffset) + "px")
.css("left",
(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function ()
{
this.title
= this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function (e) {
$("#preview")
.css("top",
(e.pageY - xOffset) + "px")
.css("left",
(e.pageX + yOffset) + "px");
});
};
</script>
</div>
</form>
</body>
</html>
C# Code:
using System.Data;
protected void Page_Load(object
sender, EventArgs e)
{
if(!IsPostBack)
{
Bindgrid();
}
}
public
void Bindgrid()
{
DataTable dt = new
DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Profileimage", typeof(string));
DataRow dr = dt.NewRow();
dr["UserId"] = 1;
dr["Profileimage"] = ResolveUrl("~/images/vs.jpg");
dr["UserName"] = "Vijay";
dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow();
dr1["UserId"] =2;
dr1["Profileimage"] = ResolveUrl("~/images/download.jpg");
dr1["UserName"] = "Rohan";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["UserId"] = 3;
dr2["Profileimage"] = ResolveUrl("~/images/cr.jpg");
dr2["UserName"] = "John";
dt.Rows.Add(dr2);
grduser.DataSource =
dt;
grduser.DataBind();
}
VB Code:
Imports System.Data
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
Me.Load
If Not IsPostBack Then
Bindgrid()
End If
End
Sub
Public
Sub Bindgrid()
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Profileimage", GetType(String))
Dim dr As DataRow = dt.NewRow()
dr("UserId") = 1
dr("Profileimage") = ResolveUrl("~/images/vs.jpg")
dr("UserName") = "Vijay"
dt.Rows.Add(dr)
Dim dr1 As DataRow = dt.NewRow()
dr1("UserId") = 2
dr1("Profileimage") = ResolveUrl("~/images/download.jpg")
dr1("UserName") = "Rohan"
dt.Rows.Add(dr1)
Dim dr2 As DataRow = dt.NewRow()
dr2("UserId") = 3
dr2("Profileimage") = ResolveUrl("~/images/cr.jpg")
dr2("UserName") = "John"
dt.Rows.Add(dr2)
grduser.DataSource =
dt
grduser.DataBind()
End
Sub
Is this article helpful for you?
If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.
.png)
No comments:
Post a Comment