C# .net 简单的点击小图显示大图。

 

GridView 中绑定了服务器上存放图片的路径。

<asp:TemplateField HeaderStyle-Width="90%" HeaderText="图片信息">

                                                    <ItemTemplate>
                                                        <table>
                                                            <tr>
                                                                <td rowspan="3">
                                                                    <a οnmοuseοver="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "ImageURL")%>')"
                                                                        οnmοuseοut="HIddiv()">
                                                                        <img style="width: 80px; height: 80px" alt="" src="<%# DataBinder.Eval(Container.DataItem, "ImageURL") %>"
                                                                            border="0"></a>
                                                                </td>
                                                                <td>
                                                                    名称:&nbsp;<asp:Label ID="AttachName" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "fileAttachName") %>'></asp:Label><br />
                                                                    上传时间:&nbsp;<asp:Label ID="CreateDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "createDate") %>'></asp:Label><br />
                                                                    标签类型:&nbsp;<asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "liblabel") %>'></asp:Label>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </ItemTemplate>
                                                    <ItemStyle HorizontalAlign="Left" />

                                                </asp:TemplateField>

GridView 外面定义一个div 用来显示图片

 <div style="position:absolute" id="divFly" >
                    <img name="ShowImage" id="ShowImage" width="350px" height="300px" style ="display:none">
                </div>

当鼠标移进图片后显示图片，onmouseover函数 GetShowImg（图片地址）

  function GetShowImg(imgfile)   
   {  
        document.all("ShowImage").src =imgfile;  
        document.getElementById("ShowImage").style.display="block";
        var x = window.event.clientX; 
        var y = window.event.clientY+document.body.scrollTop; //因为有滚动条 加上网页被卷去的高
        var divFly = document.getElementById("divFly"); 
        divFly.style.left = x+50; 
        divFly.style.top = y-150; 
   }  

隐藏div：

      function HIddiv( )   
   {  
     document.all("ShowImage").src ="";  
     document.getElementById("ShowImage").style.display="none";
   }