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设置为“
q 显示“东北”方向的RectangleHotSpot的属性设置：
Bottom设置为“
q 显示“西南”方向的RectangleHotSpot的属性设置：
Bottom设置为“
q 显示“东南”方向的RectangleHotSpot的属性设置：
Bottom设置为“
注意：对于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 +"方向。";
}