共用方式為


HOW TO:回應使用者在 ImageMap Web 伺服器控制項中的按鍵

更新:2007 年 11 月

您可以設定 ImageMap 控制項,或設定其中的個別區域 (作用點 (Hot Spot)),以便在使用者按下特定的作用點時,使控制項移至其他頁面或執行回傳 (Postback)。您可以覆寫每個作用點的控制項設定。

如果 ImageMap 控制項或個別作用點已設定為移至特定 URL,您就沒有機會直接回應按一下動作。不過,如果控制項或作用點是設定為執行回傳,則您可以寫入事件的處理常式,並判斷所按下的是哪一個作用點。

若要回應使用者在 ImageMap 控制項中的按一下動作

  1. 加入 ImageMap 控制項的 Click 事件處理常式。處理常式的第二個引數必須是型別 ImageMapEventArgs

  2. 在事件處理常式中,讀取 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>

請參閱

概念

ImageMap Web 伺服器控制項概觀

其他資源

HOW TO:將 ImageMap Web 伺服器控制項加入至 Web Form 網頁