Click here to Skip to main content
14,695,085 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i m new in 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 ""
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");
   = "block";
            img.onload = function() {
                imgFull.src = img.src;
       = "block";
       = "none";
            img.src = url;
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
       = document.body.clientHeight + "px";
            else {
       = document.body.scrollHeight + "px";
   = (width - 650) / 2 + "px";
   = "20px";
   = "100%";
   = "block";
   = "block";
            return false;
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            if (bcgDiv != null) {
       = "none";
       = "none";
       = "none";
    <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;
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
                <asp:BoundField DataField="ID" HeaderText="ID" />
                <asp:BoundField DataField="FileName" HeaderText="Image Name" />
                <asp:TemplateField HeaderText="Preview Image">
                                    <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") %>' />
                          <%--  <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("")%>' Height="82px" Width="108px"/>--%>
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%">
                    <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 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
Updated 2-Feb-11 16:14pm

1 solution

 take a look at 


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900