如何:响应 ImageMap Web 服务器控件中的用户单击
更新:2007 年 11 月
可以配置 ImageMap 控件或其中的单个区域(作用点),以便在用户单击特定的作用点时,使控件转到另一页或执行回发。可以为每个作用点重写控件的设置。
如果 ImageMap 控件或单个作用点已配置为转到特定 URL,则您没有机会直接对单击做出响应。但是,如果控件或单个作用点配置为执行回发,则可以为该事件编写处理程序并确定单击了哪个作用点。
响应 ImageMap 控件中用户单击
为 ImageMap 控件添加 Click 事件处理程序。该处理程序的第二个参数必须是 ImageMapEventArgs 类型。
在事件处理程序中,读取 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>