ASP.NET ImageMap 控件快速入门教程
本文介绍了如何在 ASP.NET 中使用 ImageMap 控件
引言
本文通过 VB.NET 语言演示了如何使用 ImageMap 控件来创建太阳系行星的介绍。当图像中的行星被点击时，该行星的简要信息将显示在图像下方，并且 iframe 将导航到维基百科中对应的页面。
此示例项目已上传到 CodeProject 网站，您也可以从 All-In-One Code Framework 网站下载。
Microsoft All-In-One Code Framework 通过三种流行编程语言（Visual C#、VB.NET、Visual C++）的典型示例代码，阐述了 Microsoft 开发技术的框架和骨架。每个示例都经过精心挑选、编写和记录，以演示一个经常被问到、测试过或使用过的编码场景。
背景
ASP.NET 2.0 及后续版本中的 ImageMap 控件可用于创建包含已定义热点区域的图像。当用户点击一个热点区域时，控件可以生成一个回发到服务器的请求，或者导航到一个指定的 URL。
例如，您可以使用此控件显示一个地理区域的地图。当用户点击地图上的特定区域时，控件会导航到一个提供所选区域附加信息的 URL。或者，您可以使用 ImageMap 控件来捕获用户响应，例如投票。当用户点击为“是”投票定义的热点区域时，将调用代码将“是”的响应记录到数据库中。
在单个 ImageMap 控件中混合这两种场景也是支持的。例如，您可以指定一个热点区域进行 URL 导航，而另一个热点区域进行回发到服务器。
ImageMap 控件中定义了三种热点区域。它们如下：
RectangleHotSpotCircleHotSpotPolygonHotSpot
顾名思义，RectangleHotSpot 定义矩形热点区域。CircleHotSpot 定义圆形热点区域，而 PolygonHotSpot 用于不规则形状的热点区域。
要定义 RectangleHotSpot 对象的区域，请使用 Left、Top、Right 和 Bottom 属性来表示区域本身的坐标。对于 CircleHotSpot 对象，将 X 和 Y 属性设置为圆心坐标。然后将 Radius 属性设置为从中心到边缘的距离。要定义 PolygonHotSpot 的区域，请将 Coordinates 属性设置为一个 string，该字符串指定 PolygonHotSpot 对象的每个顶点的坐标。多边形顶点是两条多边形边相遇的点。
Using the Code
让我们开始一个简单的演示，创建一个关于太阳系的介绍页面，以开始使用此控件。
首先，我们可以找到一张包含太阳系所有恒星的图片。
然后，我们将为图像中的每颗恒星设置一个相应热点区域，这样当用户点击特定区域时，我们就可以执行一些操作来做出响应。这里我想以行星木星为例，展示 CircleHotSpot 是如何工作的，因为它足够大，可以用于以下演示。
由于图像的左上角是坐标系的原点，X 轴向右延伸，Y 轴向下延伸，我们可以根据像素计算得出木星中心的坐标是 (410, 172)。另外，我们可以得到图像中行星的半径，等于 55 像素。
总结来说，我们可以使用如下代码在 ImageMap 控件中创建一个 CircleHotSpot：
<asp:CircleHotSpot PostBackValue="Jupiter"
AlternateText="Jupiter"
X="410" Y="172" Radius="55"
HotSpotMode="PostBack" />
其他六颗行星：水星、金星、地球、火星、天王星和海王星也可以做同样的事情，因为它们在图像中都覆盖了圆形区域。当涉及到土星时，情况会更复杂。
由于土星有光环，它在图像中覆盖了一个不规则形状的热点区域。所以我们需要使用 PolygonHotSpot。
要定义一个多边形区域，我们需要使用 Coordinates 属性来指定区域顶点的坐标。多边形顶点是两条多边形边相遇的点。您指定的字符串必须格式化为每个坐标用逗号分隔。您指定的每个顶点都必须同时具有 x 坐标和 y 坐标。例如，字符串 "128,185,335,157,510,224,510,383,228,383" 定义了一个具有五个顶点的多边形热点。
(128, 185)(335, 157)(510, 224)(510, 383)(228, 383)
现在，让我们来看看这里的土星。为了实现无论用户点击行星本身还是行星周围的光环，都能执行处理函数，我们将不规则形状区域的 12 个点作为土星的顶点。
请注意，左上角不再是 (0, 0)，因为上面的屏幕截图是从原始图像中截取的。和我们之前所做的相同，我们通过 (X 坐标, Y 坐标) 获取这些顶点的坐标，并将它们的值设置给 PolygonHotSpot 的 Coordinates 属性。因此，代码将如下所示：
<asp:PolygonHotSpot PostBackValue="Saturn"
AlternateText="Saturn"
Coordinates="492,235,
471,228,
522,179,
540,133,
581,126,
593,134,
657,110,
660,126,
615,167,
608,203,
563,219,
542,214"
HotSpotMode="PostBack" />
现在我们已经能够形状化图像中所有行星的区域了，接下来需要做的是处理 ImageMap 控件的点击事件，以响应用户的这种行为。
当用户点击 ImageMap 控件时，我们需要触发一个回发，因此需要将 ImageMap.HotSpotMode 属性或 HotSpot.HotSpotMode 属性设置为 HotSpotMode.Postback。此外，我们需要使用 PostBackValue 属性为热点区域指定一个名称。当发生回发事件时，此名称将作为 ImageMapEventArgs 事件数据传递。当点击一个回发 HotSpot 时，将触发 Click 事件。要以编程方式控制回发 HotSpot 被点击时执行的操作，请为 Click 事件提供一个事件处理程序。
让我们看一下代码隐藏页面中的 ImageMap.Click 事件处理函数。
Protected Sub imgMapSolarSystem_Click(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.
ImageMapEventArgs)
Handles imgMapSolarSystem.Click
'Code
End End Sub
在事件处理函数中，我们可以使用 e（ImageMapEventArgs 事件数据）来获取有关 ImageMap 中哪个区域被点击的信息。例如，如果用户点击了 Earth，我们可以从 e 的 PostBackValue 属性中获取此信息，因为我们已经将覆盖 Earth 的 CircleHotSpot 的 PostBackValue 设置为 "Earth"。
'If a user clicks on the Earth, the regionName will be equal to Earth
Dim regionName As String = e.PostBackValue
了解这一点后，我们最终可以编写如下的事件处理函数，使用 Select Case 语句和 e.PostBackValue 属性：
Protected Sub imgMapSolarSystem_Click(ByVal sender As Object,
ByVal e As System.Web.
UI.WebControls.ImageMapEventArgs)
Handles imgMapSolarSystem.Click
Select Case e.PostBackValue
Case "Mercury"
'When user clicks on the Mercury region
'Code
Case "Venus"
'When user clicks on the Venus region
'Code
Case "Earth"
Case "Mars"
Case "Jupiter"
Case "Saturn"
Case "Uranus"
Case "Neptune"
Case Else
'When user doesn't click on any planet in the image
End Select
End End Sub
演练
在本节中，我将逐步讲解演示项目的创建过程。
步骤 1。在 Visual Studio 2008 / Visual Web Developer 中创建一个 Visual Basic ASP.NET Web 应用程序，并将其命名为 VBASPNETImageMap。
步骤 2。将一个 ImageMap 控件添加到页面中，并将其 ID 属性更改为 imgMapSolarSystem。
[注意] ImageMap 可以包含已定义的热点区域。当用户点击一个热点区域时，控件可以生成一个回发到服务器的请求，或者导航到一个指定的 URL。本演示旨在生成一个回发到服务器的请求，并根据从 ImageMap 控件中点击的热点区域运行特定代码。有关演示导航到不同 URL 的示例，请参考以下代码，并注意 RectangleHotSpot 标签中的 NavigateUrl 属性。
<asp:ImageMap ID="ImageMap4Navigate" runat="Server"
ImageUrl="image.jpg"><asp:RectangleHotSpot AlternateText="Button 1"
Bottom="100" HotSpotMode="Navigate" Left="200" NavigateUrl="navigate1.htm"
Right="300" Top="20" /></asp:ImageMap>
步骤 3：按照演示创建 ImageMap 标签内的 RectangleHotSpots、CircleHotSpots 和 PolygonHotSpot。
[注意] ImageMap 控件中有三种热点：RectangleHotSpot、CircleHotSpot 和 PolygonHotSpot。顾名思义，RectangleHotSpot 定义矩形热点区域。CircleHotSpots 定义圆形热点区域，而 PolygonHotSpot 用于不规则形状的热点区域。
要定义 RectangleHotSpot 对象的区域，请使用 Left、Top、Right 和 Bottom 属性来表示区域本身的坐标。对于 CircleHotSpot 对象，将 X 和 Y 属性设置为圆心坐标。然后将 Radius 属性设置为从中心到边缘的距离。要定义 PolygonHotSpot 的区域，请将 Coordinates 属性设置为一个 string，该字符串指定 PolygonHotSpot 对象的每个顶点的坐标。多边形顶点是两条多边形边相遇的点。
有关这三种热点的更多信息，请参考“参考文献”部分中的链接。
步骤 4：在页面的设计视图中双击 ImageMap 控件，以 Visual Basic .NET 语言打开代码隐藏页面。
步骤 5：将代码定位到 imgMapSolarSystem_Click 事件处理程序中，并使用 Select Case 来根据 PostBackValue 创建不同的行为。
[注意] 要使热点生成回发到服务器，请将 HotSpotMode 属性设置为 Postback，并使用 PostBackValue 属性为区域指定一个名称。此名称将在回发发生时作为 ImageMapEventArgs 事件数据传递。
关注点
至此，我们就可以使用 ImageMap 控件几乎创建一个太阳系介绍页面了。如果您想要完整的演示，可以参考 All-In-One Code Framework 在 http://cfx.codeplex.com/ 上的名为 VBASPNETImageMap 的项目。如果遇到任何问题，您可以查看示例项目中的 ReadMe.txt 文件，其中包含了一个分步教程，说明如何构建此类项目。
在本次快速入门教程结束之前，我建议您参考 MSDN 上关于 ImageMap 类和三个 HotSpot 类的链接。它们肯定会为您提供更多关于如何在 ASP.NET 中使用 ImageMap 控件的信息和好的示例代码。
历史
- 2009 年 12 月 6 日：初次发布
- 2009 年 12 月 8 日：修正文章格式