want to use mouseover on image which is in

See more:

C#3.5

i m new in asp.net so i have created one grid view in which i have showing some product info like porduct name product price and delete option. i m putiing small image in grid view with its name size 60*80. whih is very small..
so i want to create onmouse over see larger image like this this "http://blog.ysatech.com/"
for that i have create coding like this but it's not working properlyso plz help me in that prob.....
my aspx page
for example code

<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";
            }
        }
    </script>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto;
        }
        .modal
        {
            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%;
        }
        #divImage
        {
            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;
        }
    </style>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
            OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" />
                <asp:BoundField DataField="FileName" HeaderText="Image Name" />
                <asp:TemplateField HeaderText="Preview Image">
                    <ItemTemplate>
                         <div>
                                    <a href='<%#DataBinder.Eval(Container.DataItem,"TITLE") %>'>
                                        <asp:Image ID="imgProdImage" runat="server" CssClass="product" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"FilePath") %>'
                                            ToolTip='<%#DataBinder.Eval(Container.DataItem,"Filename") %>' />
                                    </a>
                                </div>
                          <%--  <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("")%>' Height="82px" Width="108px"/>--%>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
actuaaly i forgot to put div tag  which is putting after gridview in the .aspx page
div is
<div id="divBackground">
        <div id="divImage">
            <table style="height: 100%; width: 100%">
                <tr>
                    <td valign="middle" align="center">
                        <img id="imgLoader" alt="" src="images/loader.gif" />
                        <img id="imgFull" runat="server" alt="" src="" style="display: none; height:700px;
                            width: 590px" />
                    </td>
                </tr>
                <%--<tr>
                <td align="center" valign="bottom">
                    <%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" />
                </td> </tr>--%>
    </table> </div> </div>
.cs page
bind info to grid and after that create row data bound..
like this
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            Image imgProdImage = (Image)row.FindControl("imgProdImage");
            if (imgProdImage != null)
            {
                imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)");
                imgProdImage.Attributes.Add("onmouseout", " HideDiv()");
            }
        }
    }

so its not working well plz help me in this matter