1. 程式人生 > >C# .net 簡單的點選小圖顯示大圖。

C# .net 簡單的點選小圖顯示大圖。

GridView 中綁定了伺服器上存放圖片的路徑。

<asp:TemplateField HeaderStyle-Width="90%" HeaderText="圖片資訊">

                                                    <ItemTemplate>
                                                        <table>
                                                            <tr>
                                                                <td rowspan="3">
                                                                    <a onmouseover="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "ImageURL")%>')"
                                                                        onmouseout="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";
   }