Show large image on mousehover using JavaScript in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Show large image on mousehover using JavaScript in asp.net

Introduction: In this article I will explain how we can Show large image on mousehover using JavaScript in asp.net

Description:
Show large image on mousehover

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

1 comments:

Your approach to this topic is unique and informative. I am writing an article for our school paper and this post has helped me. Thanks.
Wordpress Training


EmoticonEmoticon