如何:响应 ImageMap Web 服务器控件中的用户单击

更新:2007 年 11 月

可以配置 ImageMap 控件或其中的单个区域(作用点),以便在用户单击特定的作用点时,使控件转到另一页或执行回发。可以为每个作用点重写控件的设置。

如果 ImageMap 控件或单个作用点已配置为转到特定 URL,则您没有机会直接对单击做出响应。但是,如果控件或单个作用点配置为执行回发,则可以为该事件编写处理程序并确定单击了哪个作用点。

响应 ImageMap 控件中用户单击

  1. ImageMap 控件添加 Click 事件处理程序。该处理程序的第二个参数必须是 ImageMapEventArgs 类型。

  2. 在事件处理程序中,读取 ImageMapEventArgs 对象的 PostBackValue 属性,以确定单击了哪个作用点。

示例

下面的代码示例演示如何响应 ImageMap 控件中的用户单击。此页面中包含一个 ImageMap 控件,该控件中有四个矩形作用点。每个作用点的 PostBackValue 属性都被设置为唯一值。处理程序中的代码检查每个值并显示相应的响应。

<%@ Page Language="VB" %>
<script runat="server">
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" runat="server">
    <div>
    <asp:Label runat="server" ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            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 runat="server">
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" runat="server">
    <div>
    <asp:Label runat="server" ID="Label1" />
    <br />
    <br />
        <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            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 服务器控件概述

其他资源

如何:向 Web 窗体页添加 ImageMap Web 服务器控件