HOW TO:回應使用者在 ImageMap Web 伺服器控制項中的按鍵
更新:2007 年 11 月
您可以設定 ImageMap 控制項,或設定其中的個別區域 (作用點 (Hot Spot)),以便在使用者按下特定的作用點時,使控制項移至其他頁面或執行回傳 (Postback)。您可以覆寫每個作用點的控制項設定。
如果 ImageMap 控制項或個別作用點已設定為移至特定 URL,您就沒有機會直接回應按一下動作。不過,如果控制項或作用點是設定為執行回傳,則您可以寫入事件的處理常式,並判斷所按下的是哪一個作用點。
若要回應使用者在 ImageMap 控制項中的按一下動作
加入 ImageMap 控制項的 Click 事件處理常式。處理常式的第二個引數必須是型別 ImageMapEventArgs。
在事件處理常式中,讀取 ImageMapEventArgs 物件的 PostBackValue 屬性,以判斷所按下的是哪一個作用點。
範例
下列程式碼範例會示範如何回應使用者在 ImageMap 控制項中的按一下動作。這個頁面包含具有四個矩形作用點的 ImageMap 控制項。每一個作用點的 PostBackValue 屬性都會設定為唯一值。處理常式中的程式碼會檢查每一個值,並顯示適當的回應。
<%@ Page Language="VB" %>
<script >
Protected Sub ImageMap1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
Dim region As String
Select Case e.PostBackValue
Case "NW"
region = "Northwest"
Case "NE"
region = "Northeast"
Case "SE"
region = "Southeast"
Case "SW"
region = "Southwest"
End Select
Label1.Text = "You clicked the " & region & " region."
End Sub
</script>
<html>
<body>
<form id="form1" >
<div>
<asp:Label ID="Label1" />
<br />
<br />
<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Bottom="100" Right="100"
HotSpotMode="PostBack" PostBackValue="NW" />
<asp:RectangleHotSpot Bottom="100" Left="100" Right="200"
HotSpotMode="PostBack" PostBackValue="NE" />
<asp:RectangleHotSpot Bottom="200" Right="100" Top="100"
PostBackValue="SW" />
<asp:RectangleHotSpot Bottom="200" Left="100" Right="200"
Top="100" PostBackValue="SE" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
<% @ Page Language="C#" %>
<script >
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
String region = "";
switch(e.PostBackValue)
{
case "NW":
region = "Northwest";
break;
case "NE":
region = "Northeast";
break;
case "SE":
region = "Southeast";
break;
case "SW":
region = "Southwest";
break;
}
Label1.Text = "You clicked the " + region + " region.";
}
</script>
<html>
<body>
<form id="form1" >
<div>
<asp:Label ID="Label1" />
<br />
<br />
<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Bottom="100" Right="100"
HotSpotMode="PostBack" PostBackValue="NW" />
<asp:RectangleHotSpot Bottom="100" Left="100" Right="200"
HotSpotMode="PostBack" PostBackValue="NE" />
<asp:RectangleHotSpot Bottom="200" Right="100" Top="100"
PostBackValue="SW" />
<asp:RectangleHotSpot Bottom="200" Left="100" Right="200"
Top="100" PostBackValue="SE" />
</asp:ImageMap>
</div>
</form>
</body>
</html>