ASP.NET2.0 新增控件-ImageMap-优快云博客

本文详细介绍了ASP.NET中的ImageMap控件及其使用方法，包括如何定义热点区域（HotSpots），设置热点模式（HotSpotMode），以及通过点击热点触发回发（PostBack）事件或导航到指定URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自MS.Tech

ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。<o:p></o:p>

<o:p> </o:p>

? HotSpotMode：顾名思义为热点模式，对应枚举类型System.Web.UI.WebControls.HotSpotMode。其选项及说明如下：<o:p></o:p>

1) NotSet：未设置项。虽然名为未设置，但其实默认情况下会执行定向操作，定向到你指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。<o:p></o:p>

2) Navigate：定向操作项。定向到指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。<o:p></o:p>

3) PostBack：回发操作项。点击热点区域后，将执行后部的Click事件。<o:p></o:p>

4) Inactive：无任何操作，即此时形同一张没有热点区域的普通图片。<o:p></o:p>

? HotSpots：该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类，它之下有CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）三个子类。实际应用中，都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时，该类型必须继承HotSpot抽象类。下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。<o:p></o:p>

? Click：对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。<o:p></o:p>

<o:p> </o:p>

对ImageMap控件有了以上一个基本了解后，接着看ASP.NET QuickStart提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。

<o:p> </o:p>

示例一：ImageMap 多种HotSpotMode 示例<o:p></o:p>

<o:p> </o:p>

<%@ Page Language="C#" %><o:p></o:p>

<!DOCTYPE html PUBLIC "-//W<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</st1:chmetcnv>//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><o:p></o:p>

<o:p> </o:p>

</script><o:p></o:p>

<title>Untitled Page</title><o:p></o:p>

</head><o:p></o:p>

<h3><font face="Verdana">ImageMap 多种 HotSpotMode 示例</font></h3><o:p></o:p>

<o:p></o:p>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"<o:p></o:p>

runat="Server"> <o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate1.htm"<o:p></o:p>

alternatetext="Button 1"<o:p></o:p>

top="30"<o:p></o:p>

left="175"<o:p></o:p>

bottom="110"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot <o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate2.htm"<o:p></o:p>

alternatetext="Button 2" <o:p></o:p>

top="155"<o:p></o:p>

left="175"<o:p></o:p>

bottom="240"<o:p></o:p>

right="355"> <o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Navigate"<o:p></o:p>

NavigateUrl="navigate3.htm"<o:p></o:p>

alternatetext="Button 3" <o:p></o:p>

top="285"<o:p></o:p>

left="175"<o:p></o:p>

bottom="365"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot> <o:p></o:p>

<o:p></o:p>

</asp:imagemap><o:p></o:p>

<o:p> </o:p>

</div><o:p></o:p>

</form><o:p></o:p>

</body><o:p></o:p>

</html><o:p></o:p>

<o:p> </o:p>

示例二：ImageMap PostBack 模型示例<o:p></o:p>

<o:p> </o:p>

<%@ Page Language="C#" %><o:p></o:p>

void Buttons_Clicked(object sender, ImageMapEventArgs e)<o:p></o:p>

{<o:p></o:p>

label1.Text = e.PostBackValue + " clicked!";<o:p></o:p>

}<o:p></o:p>

</script><o:p></o:p>

<title>Untitled Page</title><o:p></o:p>

</head><o:p></o:p>

<font face="Verdana">ImageMap PostBack 模型示例</font></h3><o:p></o:p>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"<o:p></o:p>

hotspotmode="Postback" onclick="Buttons_Clicked" runat="Server"> <o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot<o:p></o:p>

hotspotmode="Postback"<o:p></o:p>

postbackvalue="Button1"<o:p></o:p>

alternatetext="Button 1"<o:p></o:p>

top="30"<o:p></o:p>

left="175"<o:p></o:p>

bottom="110"<o:p></o:p>

right="355"><o:p></o:p>

</asp:RectangleHotSpot><o:p></o:p>

<o:p></o:p>

<asp:RectangleHotSpot <o:p></o:p>

hotspotmode="Postback"<o:p></o:p>

postbackvalue="Button2"<o:p></o:p>