ImageMap控件

ImageMap控件可以在Web页面上创建一个图像，该图像可以包含许多可由用户单击的区域，这些区域称为“热点（HotSpot）”。每一个热点都可以是一个单独的超链接或者回发（PostBack）事件。用户可以通过单击这些热点区域进行回发操作或者定向（Navigate）到某个URL地址。可以根据需要为图像定义任意数量的热点，但不需要定义足以覆盖整个图形的热点。因此，该控件一般用在需要对某张图片的局部范围进行互动操作时。

在日常编程中，主要使用它的HotSpotMode、HotSpots属性和Onick事件。

1) HotSpotMode属性。顾名思义，HotSpotMode为热点模式，它对应枚举类型System.Web.UI.WebControls.HotSpotMode。其选项及说明如表3-4所示。

表3-4   HotSpotMode属性的选项说明

2) HotSpots属性。该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类，它有CircleHotSpot（圆形热区）、RectangleHotSpot（矩形热区）和PolygonHotSpot（多边形热区）这三个子类。实际应用中，都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型，该类型必须继承HotSpot抽象类。

3) Onclick事件。对热点区域的点击事件经常在HotSpotMode为PostBack时用到。

现在先来看下面的一个示例程序。该示例用到了HotSpotMode，并将一个图片分成3个矩形热点区域（RectangleHotSpot），当单击每个矩形热点区域时，就会连接到另外一个Web站点。其中，Top、Left、Bottom和Right代表RectangleHotSpot的四个坐标点，以此来形成一个矩形热点区域，如代码清单3-1所示。

代码清单3-1   TestImageMap1.aspx

<formid="form1"runat="server">
<div>
<asp:ImageMapID="imageMap1"ImageUrl="Images/1.jpg"
AlternateText="ImageMap控件示例"Runat="Server">
<asp:RectangleHotSpotHotSpotMode="Navigate"
NavigateUrl="http://www.comesns.com"
AlternateText="区域一，连接到www.comesns.com"
Top="0"Left="0"Bottom="35"Right="90">
asp:RectangleHotSpot>
<asp:RectangleHotSpotHotSpotMode="Navigate"
NavigateUrl="http://www.google.cn"
AlternateText="区域二，连接到www.google.cn"
Top="0"Left="90"Bottom="35"Right="180">
asp:RectangleHotSpot>
<asp:RectangleHotSpotHotSpotMode="Navigate"
NavigateUrl="http://www.baidu.com"
AlternateText="区域三，连接到www.baidu.com"
Top="35"Left="0"Bottom="70"Right="180">
asp:RectangleHotSpot>
asp:ImageMap>
div>
form>

运行上面的程序，结果如图3-1所示。在该运行结果中，当把鼠标放到某个矩形热点区域时就能够出现相应的信息提示。比如把鼠标放在热点区域二中，会出现“区域二，连接到www.google.cn”的提示信息，单击该热点区域，就会连接到www.google.cn网站。

 

由上面的示例可以看出，ImageMap控件实际是由两个部分组成：

第一个部分是图像，它可以是任何标准 Web 图形格式的图形，例如 .gif、.jpg 或 .png 文件。

第二个部分是一个热点控件集。每个热点控件都是一个不同的元素。对于每个热点控件，都需要定义其形状[CircleHotSpot（圆形热区）、RectangleHotSpot（矩形热区）和PolygonHotSpot（多边形热区）]，还要定义用于指定热点位置和大小的坐标。例如，如果创建了一个矩形热点区域，则应定义它的四个坐标点位置。

在代码清单3-1中，为每个矩形热点配置了一个超链接，通过该超链接可以转到为该矩形热点提供的 URL地址。当然，还可以将该控件配置为在用户单击某个热点时执行回发，为每个热点提供一个唯一值。回发会引发ImageMap控件的OnClick事件。在事件处理程序中，可以读取分配给每个热点的唯一值。来看下面的示例，如代码清单3-2所示。

代码清单3-2   TestImageMap2.aspx

<formid="form1"runat="server">
<div>
<asp:ImageMapid="imageMap2"ImageUrl="Images/1.jpg"
AlternateText="ImageMap控件示例"HotSpotMode="PostBack"
Runat="Server"onclick="imageMap2_Click">
<asp:RectangleHotSpotHotSpotMode="PostBack"
PostBackValue="http://www.comesns.com"
AlternateText="区域一，连接到www.comesns.com"
Top="0"Left="0"Bottom="35"Right="90">
asp:RectangleHotSpot>
<asp:RectangleHotSpotHotSpotMode="PostBack"
PostBackValue="http://www.google.cn"
AlternateText="区域二，连接到www.google.cn"
Top="0"Left="90"Bottom="35"Right="180">
asp:RectangleHotSpot>
<asp:RectangleHotSpotHotSpotMode="PostBack"
PostBackValue="http://www.baidu.com"
AlternateText="区域三，连接到www.baidu.com"
Top="35"Left="0"Bottom="70"Right="180">
asp:RectangleHotSpot>
asp:ImageMap>
<br/>
<asp:LabelID="label1"runat="server">asp:Label>
div>
form>

如代码清单3-2所示，它使用了PostBack回发模式，并在ImageMap控件里添加了一个OnClick事件imageMap2_Click。imageMap2_Click事件处理代码如下：

protected void imageMap2_Click(object sender, ImageMapEventArgs e)
{
label1.Text = e.PostBackValue
 + " clicked!";
}

运行上面的程序，结果如图3-2所示。在该运行结果中，当把鼠标放到某个矩形热点区域时就能够出现相应的信息提示。单击该热点区域时，就会触发imageMap2_Click事件，在页面输出被单击区域的PostBackValue值。