ASP.NET - ImageMap Web 服务器控件概述（一）

来源：互联网发布：java本科教材编辑：程序博客网时间：2024/05/01 13:56

使用 ASP.NET ImageMap 控件创建具有用户可以单击的单个区域的图像，这些单个区域称为作用点。每一个作用点都可以是一个单独的超链接或回发事件。

一、背景

ImageMap 控件由两个元素组成。第一个是图像，它可是任何标准 Web 图形格式的图形，如 .gif、.jpg 或 .png 文件。

第二个元素是 HotSpot 控件的集合。每个作用点控件都是一个类型为 CircleHotSpot、RectangleHotSpot 或 PolygonHotSpot 的不同项。对于每个作用点控件，您都要定义用于指定该作用点的位置和大小的坐标。例如，如果创建一个 CircleHotSpot 控件，则需要定义圆心的 x 和 y 坐标以及圆的半径。

可以根据需要为图像定义任意数目的作用点。您不必定义许多作用点，来覆盖整个图形。

说明：可以定义重叠的作用点。每个作用点都有一个 z 顺序值。如果用户点击某个由两个或多个重叠的作用点定义的区域，则将选定 z 顺序值最高的作用点。

响应用户单击：您可以指定用户单击作用点时发生的事件。您可以将每个作用点配置为可以转到您为该作用点提供的 URL 的超链接。或者，您也可以将控件配置为在用户单击某个作用点时执行回发，并可为每个作用点提供一个唯一值。回发会引发 ImageMap 控件的 Click 事件。在事件处理程序中，可以读取分配给每个作用点的唯一值。

二、如何：向网页添加 ImageMap Web 服务器控件

ImageMap 控件创建了一个图形，这个图形中具有用户可以分别单击的作用点。创建 ImageMap 控件包括以下步骤：创建控件、指定图像，然后分别定义作用点。

1、添加 ImageMap 控件

·从工具箱的“标准”选项卡中，将 ImageMap 控件拖动到页面上。

·在“属性”窗口中，将控件的 ImageUrl 属性设置为要显示的图形的 URL。

说明：单击属性框中的按钮来显示“选择图像”对话框。

·或者，设置控件的 HotSpotMode 属性来指定单击一个作用点的结果是导航到另一个页面还是回发。

说明：您可以为每个作用点重写控件宽度设置。

2、定义作用点

·在“属性”窗口中，单击“作用点”属性框来显示作用点集合编辑器对话框。

·单击“添加”按钮旁边的箭头按钮来选择要创建的作用点类型（CircleHotSpot、RectangleHotSpot、PolygonHotSpot）。

·对于每个作用点，请使用“属性”网格来为作用点指定坐标，如下表所示。

作用点类型

坐标

CircleHotSpot

Radius

RectangleHotSpot

Top

PolygonHotSpot

Coordinates

·如果您要重写控件的 HotSpotMode 设置，请为每个作用点设置 HotSpotMode 属性来指定单击作用点的结果是导航到另一个页面还是回发。

·如果作用点设置为导航，则指定它的 NavigateUrl 属性。

·如果作用点设置为执行回发，则为每个作用点设置 PostBackValue 以提供单击的是哪个作用点的信息。您可以在 Click 事件处理程序中读取该值。

·定义完作用点后，单击“确定”。

三、如何：响应 ImageMap Web 服务器控件中的用户单击

可以配置 ImageMap 控件或其中的单个区域（作用点），以便在用户单击特定的作用点时，使控件转到另一页或执行回发。可以为每个作用点重写控件的设置。

如果 ImageMap 控件或单个作用点已配置为转到特定 URL，则您没有机会直接对单击做出响应。但是，如果控件或单个作用点配置为执行回发，则可以为该事件编写处理程序并确定单击了哪个作用点。

·为 ImageMap 控件添加 Click 事件处理程序。该处理程序的第二个参数必须是 ImageMapEventArgs 类型。

·在事件处理程序中，读取 ImageMapEventArgs 对象的 PostBackValue 属性，以确定单击了哪个作用点。

示例

下面的代码示例演示如何响应 ImageMap 控件中的用户单击。此页面中包含一个 ImageMap 控件，该控件中有四个矩形作用点。每个作用点的 PostBackValue 属性都被设置为唯一值。处理程序中的代码检查每个值并显示相应的响应。

<% @ Page Language="C#" %>

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

{

String region = "";

switch(e.PostBackValue)

{

case "NW":

region = "Northwest";

break;

case "NE":

region = "Northeast";

break;

case "SE":

region = "Southeast";

break;

case "SW":

region = "Southwest";

break;

}

Label1.Text = "You clicked the " + region + " region.";

}

</script>

<html>

<body>

<div>

<asp:Label runat="server" ID="Label1" />

<br />

<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG"

runat="server"

HotSpotMode="PostBack"

OnClick="ImageMap1_Click">

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

HotSpotMode="PostBack" PostBackValue="NW" />

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

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

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

PostBackValue="SW" />

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

Top="100" PostBackValue="SE" />

</asp:ImageMap>

</div>

</form>

</body>

</html>

四、类参考

下表列出了与 ImageMap 控件相关的类。

成员

说明

ImageMap

控件的主类。

CircleHotSpot

表示单个圆形作用点。

RectangleHotSpot

表示单个矩形作用点。

PolygonHotSpot

表示单个多边形作用点。