In this post I will explain Image Preview on mouseover in
Jquery in Asp.Net.
Jquery Code:-
<script type="text/javascript"
src="../Scripts/jquery-1.7.2.min.js"></script>
<script
type="text/javascript"
>
$(document).ready(function () {
ImagePreview();
});
function ImagePreview() {
xOffset = -25;
yOffset = 50;
$("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("fast");
},
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>
Design.aspx:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="../Scripts/jquery-1.7.2.min.js"></script>
<script
type="text/javascript"
>
$(document).ready(function () {
ImagePreview();
});
function ImagePreview() {
xOffset = -25;
yOffset = 50;
$("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("fast");
},
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>
<style
type="text/css">
#preview
{
position:absolute;
border:none;
background:gray;
padding:2px;
display:none;
color:Gray;
box-shadow:4px
4px 4px rgba(105,116,130,1);
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:DataList ID="DataList1"
runat="server"
RepeatColumns="4"
CellPadding="5">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%#Bind("Name","image/{0}") %>' >
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Bind("Name","image/{0}") %>' /></asp:HyperLink>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Design.aspx.cs:-
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Collections;
using
System.IO;
public partial class jquery_ImagePreview : System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
public void
BindDataList()
{
DirectoryInfo dirInfo = new DirectoryInfo(MapPath("image"));
FileInfo[] file = dirInfo.GetFiles();
ArrayList arrList = new ArrayList();
foreach (FileInfo
info in file)
{
arrList.Add(info);
}
DataList1.DataSource = arrList;
DataList1.DataBind();
}
}
No comments:
Post a Comment
Note: only a member of this blog may post a comment.