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>
名稱: <asp:Label ID="AttachName" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "fileAttachName") %>'></asp:Label><br />
上傳時間: <asp:Label ID="CreateDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "createDate") %>'></asp:Label><br />
標籤型別: <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";
}