### ImageMap 控件

#### 1．ImageMap 控件的概述

ImageMap 控件允许在图片中定义一些热点（HotSpot）区域。当用户单击这些热点区域时，将会引发超链接或者单击事件。当需要对某幅图片的局部实现交互时，使用 ImageMap 控件。例如，以图片形式展示网站地图，流程图等。图 1 为 ImageMap 控件。

图 1 ImageMap 控件

（1）ImageMap 控件常用属性

ImageMap 控件常用属性及说明如表 1 所示。

表 1 Image 控件常用的属性及说明

属性名称 | 属性值
ID | 获取或设置分配给服务器控件的编程标识符
AlternateText | 在图像无法显示时显示的替换文字
HotSpotMode | 获取或设置单击 HotSpot 对象时 ImageMap 控件的 HotSpot 对象的默认行为
HotSpots | 获取 HotSpot 对象的集合，这些对象表示 ImageMap 控件中定义的作用点区域
ImageAlign | 获取或设置 Image 控件相对于网页上其他元素的对齐方式
ImageUrl | 获取或设置在 Image 控件中显示的图像的位置
Target | 获取或设置单击 ImageMap 控件时显示链接到的网页内容的目标窗口或框架
Enabled | 获取或设置一个值，该值指示是否已启用控件

ImageMap 控件比较重要的两个属性是 ImageMap 控件的 HotSpotMode 属性和 HotSpots 属性。下面分别来介绍一下：

q HotSpotMode 属性

HotSpotMode 属性用于获取或者设置单击热点区域后的默认行为方式。在表 2 中列出了 HotSpotMode 属性的枚举值。

表 2 ImageMap 控件的 HotSpotMode 属性的枚举值

枚举值 | 说明
Inactive | 无任何操作，即此时形同一张没有热点区域的普通图片
NotSet | 未设置项，同时也是默认项。虽然名为未设置，但是默认情况下将执行定向操作，即链接到指定的 URL 地址。如果未指 URL 地址，则默认链接到应用程序根目录下
Navigate | 定向操作项。链接到指定的 URL 地址。如果未指定 URL 地址，则默认链接到应用程序根目录下
PostBack | 回传操作项。单击热点区域后，将触发控件的 Click 事件

注意：HotSpotMode 属性虽然为图片中所有热点区域定义了单击事件的默认行为方式，然而，在某些情况下，图片中热点区域的行为方式各不相同，需要单独为每个热点区域定义 HotSpotMode 属性及其相关属性。

q HotSpots 属性

HotSpots 属性用于获取 HotSpots 对象集合。HotSpot 类是一个抽象类，它包含 CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和 PolygonHotSpot（多边形热区）3 个子类。这些子类的实例称为 HotSpot 对象。创建 HotSpot 对象的步骤如下：

首先，在 ImageMap 控件上，单击鼠标右键，弹出菜单栏。在菜单栏上单击“属性”项，弹出属性窗口。

其次，在属性窗口中，单击 HotSpots 属性后的 按钮，将会弹出“HotSpot 集合编辑器”窗口。在该窗口中，单击“添加”按钮后的 图标，将会弹出一个下拉菜单，该下拉菜单中包括 CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和 PolygonHotSpot（多边形热区）3 个对象，可以通过单击添加该对象。

图 2 HotSpot 集合编辑器

然后，为热点（HotSpot）区域设置属性。

在定义每个热点区域过程中，主要设置两个属性。一个是 HotSpotMode 及其相关属性。HotSpot 对象中的 HotSpotMode 属性用于为单个热点区域设置单击后行显方式，其与 ImageMap 控件的 HotSpotMode 属性基本相同。例如，当 HotSpotMode 属性值设置为 PostBack 时，则必须设置定义回传值的 PostBackValue 属性。另一个是热点区域坐标属性。对于 CircleHotSpot（圆形热区），需要设置半径 Radius 和圆心坐标 X 和 Y。对于 RectangleHotSpot（方形热区），需要设置其左上右下的坐标，即 Left、Top、Right、Bottom 属性。对于 PolygonHotSpot（多边形热区），需要设置每一个关键点的坐标 Coordinates 属性。

最后，单击【确定】按钮，创建完成。

（2）ImageMap 控件常用事件

ImageMap 控件常用的事件是 Click 事件，该事件在用户单击热点区域时发生。当 HotSpotMode 属性设置为 PostBack 时，则需要定义并实现该事件的处理程序。

#### 2．使用 ImageMap 控件展示图片中的方位

下面示例主要是使用 ImageMap 控件展示图片中的方位。执行程序，示例运行结果如图 3 所示，在图片中，点击西北方向，在界面中，将会现示“您现在所指的方向是：西北方向”字样，如图 4 所示。

图 3 示例运行结果图

图 4 指向“西北方向”

程序实现的主要步骤：

（1）新建一个网站，默认主页为 Default.aspx，在 Default.aspx 页面上添加一个 ImageMap 控件。其属性设置如表 2 所示。

表 2 ImageMap 控件属性设置

属性名称 | 属性值
ID | ImageMap1
HotSpotMode | PostBack
ImageUrl | ~/images/map.bmp

（2）定义 4 个 RectangleHotSpot（方形热区），并为每个热点区设置相关的属性。

在属性窗口中，单击 HotSpots 属性后的 按钮，弹出“HotSpot 集合编辑器”窗口。在该窗口中，单击“添加”按钮后的 图标，在下拉菜单中单击 4 个 RectangleHotSpot（方形热区）项，并设置其左（Left）、上（Top）、右（Right）和下(Bottom)的坐标值。4 个热点区的属性设置如下所示。

q 显示“西北”方向的 RectangleHotSpot（方形热区）的属性设置：

Bottom 设置为“100”、Right 设置为“100”、HotSpotMode 设置为“PostBack”、PostBackValue 设置为“NW”、AlternateText 设置为“西北”

q 显示“东北”方向的 RectangleHotSpot 的属性设置：

Bottom 设置为“100”、Left 设置为“100”、Right 设置为“100”、HotSpotMode 设置为“PostBack”、PostBackValue 设置为“NE”、AlternateText 设置为“东北”

q 显示“西南”方向的 RectangleHotSpot 的属性设置：

Bottom 设置为“200”、Right 设置为“100”、Top 设置为“100”、HotSpotMode 设置为“PostBack”、PostBackValue 设置为“SW”、AlternateText 设置为“西南”

q 显示“东南”方向的 RectangleHotSpot 的属性设置：

Bottom 设置为“200”、Left 设置为“100”、Right 设置为“200”、Top 设置为“100”、HotSpotMode 设置为“PostBack”、PostBackValue 设置为“SE”、AlternateText 设置为“东南”

注意：对于 ImageMap 控件的属性设置，也可以在 HTML 视图中，添加如下代码来实现。<asp:ImageMap ID="ImageMap1" ImageUrl="~/images/指南针.jpg " runat="server"

HotSpotMode="PostBack">

<asp:RectangleHotSpot Bottom="100" Right="100"

HotSpotMode="PostBack" PostBackValue="NW" AlternateText="西北" />

<asp:RectangleHotSpot Bottom="100" Left="100" Right="200" AlternateText="东北"

HotSpotMode="PostBack" HotSpotMode="PostBack" PostBackValue="NE" />

<asp:RectangleHotSpot Bottom="200" Right="100" Top="100" AlternateText="西南"

HotSpotMode="PostBack" PostBackValue="SW" />

<asp:RectangleHotSpot Bottom="200" Left="100" Right="200" AlternateText="东南"

HotSpotMode="PostBack" Top="100" PostBackValue="SE" /> </asp:ImageMap>

（3）为了实现在单击图片中的热点区域时，将图片的方位显示出来，需要在 ImageMap 控件的 Click 事件下，添加如下代码。

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

{

String region = "";

switch (e.PostBackValue)

{

case "NW":

region = "西北";

break;

case "NE":

region = "东北";

break;

case "SE":

region = "东南";

break;

case "SW":

region = "西南";

break;

}

Label1.Text = "您现在所指的方向是： "+ region +"方向。";

}