Home > ASP.Net, Javascript > Use Mouseover on image in Gridview to Zoom Image

Use Mouseover on image in Gridview to Zoom Image


try this example

Step1 :- Open MS SQL Server and create new database and add new Table called “Album” with the following fields

– Id —> int (Auto Increment) and Primary Key

– Name —> nvarchar(50)

– Pic —> nvarchar(50)

where i will save image name in database and upload it in folder in my website called “Picture”

Step2 :- Open VS2005 and create a new website and add new web page and from ToolBox drag Gridview Control and Bind it using SQLDatasource control

Step3 :- Add this CSS Style

    <style type="text/css">
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto;
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
            z-index: 100;
            opacity: 0.8;
            filter: alpha(opacity=60);
            -moz-opacity: 0.8;
            min-height: 100%;
            display: none;
            z-index: 1000;
            position: fixed;
            top: 0;
            left: 0;
            background-color: White;
            height: 300px;
            width: 600px;
            padding: 3px;
            border: solid 1px black;
        * html #divImage
            position: absolute;

Step4 :- Add this Javascript Script in your page

    <script type="text/javascript">
        function LoadDiv(url) {
            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");

            imgLoader.style.display = "block";
            img.onload = function() {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            img.src = url;
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";

            imgDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "20px";
            bcgDiv.style.width = "100%";

            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            if (bcgDiv != null) {
                bcgDiv.style.display = "none";
                imgDiv.style.display = "none";
                imgFull.style.display = "none";

and Your web page will be

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"   OnRowDataBound="GridView1_RowDataBound">
                <asp:TemplateField HeaderText="Image" SortExpression="Image">

                        <asp:Image ID="Image1" runat="server" Height="85px" ImageUrl='<%# Eval("Image", "~/Car_Image/{0}") %>' Width="122px" />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Car_DBConnectionString %>"
            SelectCommand="SELECT [Image] FROM [Car]"></asp:SqlDataSource>

<div id="divBackground">
        <div id="divImage">
            <table style="height: 100%; width: 100%">
                    <td valign="middle" align="center">
                        <img id="imgLoader" alt="" src="5.gif" />
                        <img id="imgFull" runat="server" alt="" src=""  />
                <td align="center" valign="bottom">
                    <%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" />
                </td> </tr>--%>

Step5 :- In code behind add the following code:-

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        foreach (GridViewRow row in GridView1.Rows)
            Image imgProdImage = (Image)row.FindControl("Image1");
            if (imgProdImage != null)
                imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)");
                imgProdImage.Attributes.Add("onmouseout", " HideDiv()");

Hope this helps

Good Luck

Categories: ASP.Net, Javascript
  1. Michael
    January 7, 2015 at 10:59 am

    Thank you this helped a lot.
    Just one thing, you need to remove runat=”server” from this line

    • yasserzaid
      June 2, 2015 at 11:32 am

      @Michael : You are welcome hope my post helps you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: