GridView 悬停某一列上显示相关图片

此文章只是列出关键性的代码，其他的代码需要自己编写

前台JS代码：

 <script language="javascript" type="text/javascript">

  

///显示/隐藏图片的DIV层///

  function over(surl)

  {

    var dd=surl;

    document.getElementById("img_show").src=dd;

    document.getElementById("showImg").style.display="block";

  }

  function out(surl)

  {

 var dd=surl;

  document.getElementById("img_show").src=dd;

  document.getElementById("showImg").style.display="none"; 

 

  }

 /让显示的图片等比例缩放///

var flag=false;

function DrawImage(ImgD)

{

    var image=new Image();

    image.src=ImgD.src;

    if(image.width>0 && image.height>0)

    {

        flag=true;

        if(image.width/image.height>= 260/240)

        {

            if(image.width>260)

            {

                ImgD.width=260;

                ImgD.height=(image.height*240)/image.width;

            }

            else

            {

                ImgD.width=image.width;

                ImgD.height=image.height;

            } 

        }

        else

        {

            if(image.height>240)

            {

                ImgD.height=240;

                ImgD.width=(image.width*240)/image.height;

            }

            else

            {

                ImgD.width=image.width;

                ImgD.height=image.height;

            } 

        }

    }

} 

 </script>

前台aspx代码中的Gridview，其中包含了一个SiteMapPath 控件，一个div控件“showImg”，div用来显示图片功能的。

  <table width="100%" border="0">

                        <tr>

                            <td height="30" bgcolor="#A11513" class="title1" style="padding-left: 20px;">

                                <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Size="12px">

                                    <RootNodeStyle ForeColor="White" Font-Size="12px" />

                                    <NodeStyle ForeColor="White" Font-Size="12px" />

                                </asp:SiteMapPath>

                            </td>

                        </tr>

                        <tr>

                            <td height="8" style="padding-left: 20px;">

                            </td>

                        </tr>

                        <tr>

                            <td valign="bottom" align="center">

                                <div id="showImg" style="display: none; position: absolute; top: 275px; left: 854px;

                                    filter: alpha(opacity=70);">

                                    <img id="img_show" src="" alt="" height='240' width='260' οnlοad='javascript:DrawImage(this)' />

                                </div>

                                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand"

                                    BorderStyle="None" Width="90%" AllowPaging="True" AllowSorting="True" Font-Size="14px"

                                    OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"

                                    ForeColor="Black" BorderColor="Silver" CellPadding="5" PageSize="15" OnRowCreated="GridView1_RowCreated">

                                    <RowStyle HorizontalAlign="Left" VerticalAlign="Middle" />

                                    <HeaderStyle ForeColor="Black" BackColor="PapayaWhip" HorizontalAlign="Center" VerticalAlign="Middle"

                                        Wrap="False" />

                                    <Columns>

                                        <asp:BoundField DataField="img" HeaderText="图片"></asp:BoundField>

                                        <asp:BoundField DataField="ID" HeaderText="拍品号" HtmlEncode="false">

                                            <ItemStyle HorizontalAlign="Center" />

                                        </asp:BoundField>

                                        <asp:TemplateField HeaderText="名称">

                                            <ItemTemplate>

                                                <asp:HyperLink ID="lb_zz" runat="server" Text='<%# string.Format("{0} {1} {2}", Eval("zz"),Eval("name"),Eval("xs"))%>'

                                                    NavigateUrl='<%# "~/sale_xxxx.aspx?id=" + Eval("ID") %>'></asp:HyperLink>

                                            </ItemTemplate>

                                        </asp:TemplateField>

                                        <asp:BoundField DataField="gj" HeaderText="估价"></asp:BoundField>

                                        <asp:BoundField HeaderText="RMB" DataField="cjj" />

                                        <asp:BoundField HeaderText="HKD" DataField="hkd" />

                                        <asp:BoundField HeaderText="USD" DataField="usd" />

                                        <asp:BoundField HeaderText="EUR" DataField="eur" />

                                    </Columns>

                                    <PagerSettings Visible="False" />

                                </asp:GridView>

                            </td>

                        </tr>

                        <tr>

                            <td align="right" class="font2">

                                <asp:LinkButton ID="btnFirst" runat="server" Font-Size="12px" OnClick="PagerButtonClick">首页</asp:LinkButton>

                                <asp:LinkButton ID="btnPrev" runat="server" Font-Size="12px" OnClick="PagerButtonClick">上一页</asp:LinkButton>

                                <asp:Label ID="LblCurrentIndex" runat="server" Font-Size="12px" Text="Label"></asp:Label>

                                <asp:Label ID="LblPageCount" runat="server" Font-Size="12px" Text="Label"></asp:Label>

                                <asp:Label ID="LblRecordCount" runat="server" Font-Size="12px" Text="Label"></asp:Label>

                                <asp:LinkButton ID="btnNext" runat="server" Font-Size="12px" OnClick="PagerButtonClick">下一页</asp:LinkButton>

                                <asp:LinkButton ID="btnLast" runat="server" Font-Size="12px" OnClick="PagerButtonClick">末页</asp:LinkButton>

                                跳转到第<asp:DropDownList ID="ddlCurrentPage" runat="server" Font-Size="12px" AutoPostBack="True"

                                    OnSelectedIndexChanged="ddlCurrentPage_SelectedIndexChanged" Width="40px">

                                </asp:DropDownList>

                            </td>

                        </tr>

                    </table>

cs后台代码：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        int i;

        //执行循环，保证每条数据都可以更新

        for (i = 0; i <= GridView1.Rows.Count; i++)

        {

            if (e.Row.RowType == DataControlRowType.Header)

            {

                e.Row.Cells[0].Visible = false; 

            }

            //首先判断是否是数据行

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                //当鼠标停留时更改背景色

                e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#E0E0E0';");

                e.Row.Cells[2].Attributes.Add("onmouseover", " over('" + e.Row.Cells[0].Text.Substring(2) + "') ; ");

                //当鼠标移开时还原背景色

                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c; ");

                e.Row.Cells[2].Attributes.Add("onmouseout", " out('" + e.Row.Cells[0].Text.Substring(2) + "');  "); 

                e.Row.Cells[0].Visible = false;

            }

        }

    }