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

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

五、ImageMap 类

使用 ImageMap 控件可以创建包含定义的作用点区域的图像。当用户单击作用点区域时，此控件可以生成到服务器的回发，也可以导航到指定的 URL。例如，可以使用此控件显示一幅地理区域的地图。用户单击该地图上的特定区域时，此控件就导航到一个 URL，该 URL 提供了选定区域的附加数据。您还可以使用此控件生成到服务器的回发，并根据单击过的作用点区域运行特定代码。例如，可以使用 ImageMap 控件捕获用户响应，如投票。当用户单击为赞成票定义的作用点区域时，会调用代码在数据库中记录一个赞成响应；当用户单击为反对票定义的作用点区域时，会记录一个反对响应。此外，还可以在单个 ImageMap 控件内混合这两个方案。例如，可以指定一个作用点区域导航到 URL，另一个作用点区域回发到服务器。

使用 ImageUrl 属性可以指定要为 ImageMap 控件显示的图像的路径。可以在 ImageMap 控件内定义任意数目的 HotSpot 对象。可以使用 CircleHotSpot、RectangleHotSpot 和 PolygonHotSpot 类定义作用点区域；也可以从 HotSpot 抽象类派生，以便自定义作用点对象。

有两种方式可以指定单击 HotSpot 后 ImageMap 控件中 HotSpot 对象的行为。可以使用 ImageMap 控件的 HotSpotMode 属性，也可以使用单个 HotSpot 对象的 HotSpotMode 属性。这些属性是使用 HotSpotMode 枚举值之一设置的。如果这两个属性都被设置，则针对每个单个 HotSpot 对象指定的 HotSpotMode 属性将优先于 ImageMap 控件的 HotSpotMode 属性。

若要导航到 URL，请将 ImageMap..::.HotSpotMode 或 HotSpot..::.HotSpotMode 属性设置为 HotSpotMode.Navigate。使用 NavigateUrl 属性可以指定要导航到的 URL。

若要生成到服务器的回发，请将 ImageMap..::.HotSpotMode 或 HotSpot..::.HotSpotMode 属性设置为 HotSpotMode.Postback。使用 PostBackValue 属性，可以指定作用点区域的名称。当发生回发事件时，此名称将传递到 ImageMapEventArgs 事件数据中。当单击回发 HotSpot 时，将引发 Click 事件。若要以编程方式控制在单击回发 HotSpot 时执行的操作，请为 Click 事件提供事件处理程序。

若要使 ImageMap 控件中的所有 HotSpot 对象具有相同的行为，请使用 ImageMap..::.HotSpotMode 属性指定行为。然后，可以将每个单个 HotSpot 对象的 HotSpot..::.HotSpotMode 属性都设置为 HotSpotMode.NotSet，也可以不指定 HotSpot..::.HotSpotMode 属性的值。

若要为 ImageMap 中的 HotSpot 对象指定不同的行为，请将每个单个 HotSpot 对象的 HotSpot..::.HotSpotMode 属性设置为 HotSpotMode.Navigate 或 HotSpotMode.PostBack。

说明：如果 ImageMap 控件的 ImageMap..::.HotSpotMode 属性或该控件包含的任何 HotSpot 对象的 HotSpot..::.HotSpotMode 属性被设置为 HotSpotMode.NotSet 或没有设置属性值，则默认行为是 HotSpotMode.Navigate。

示例

下面的代码示例演示如何以声明方式创建包含两个 CircleHotSpot 对象的 ImageMap 控件。HotSpot..::.HotSpotMode 属性被设置为 HotSpotMode.Navigate，这导致每当用户单击某个圆形作用点区域时该页都导航到指定的 URL。若要此示例正确运行，您必须为 ImageUrl 属性提供自己的图像，并对该图像路径做相应更新，以便应用程序可以找到它。

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html >

<title>ImageMap Class Navigate Example</title>

</head>

<body>

<h3>ImageMap Class Navigate Example</h3>

<h4>Shopping Choices:</h4>

<asp:imagemap id="Shop"

imageurl="Images/ShopChoice.jpg"

width="150"

height="360"

alternatetext="Shopping choices"

runat="Server">

<asp:circlehotspot

navigateurl="http://www.tailspintoys.com"

x="75"

y="290"

radius="75"

hotspotmode="Navigate"

alternatetext="Shop for toys">

</asp:circlehotspot>

<asp:circlehotspot

navigateurl="http://www.cohowinery.com"

x="75"

y="120"

radius="75"

hotspotmode="Navigate"

alternatetext="Shop for wine">

</asp:circlehotspot>

</asp:imagemap>

</form>

</body>

</html>

下面的代码示例演示如何以声明方式创建包含两个 RectangleHotSpot 对象的 ImageMap 控件。ImageMap..::.HotSpotMode 属性被设置为 HotSpotMode.PostBack，这导致每当用户单击某个作用点区域时该页都回发给服务器。若要此示例正确运行，您必须为 ImageUrl 属性提供自己的图像，并对该图像路径做相应更新，以便应用程序可以找到它。

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

void VoteMap_Clicked (Object sender, ImageMapEventArgs e)

{

string coordinates;

string hotSpotType;

int yescount = ((ViewState["yescount"] != null)? (int)ViewState["yescount"] : 0);

int nocount = ((ViewState["nocount"] != null)? (int)ViewState["nocount"] : 0);

// When a user clicks the "Yes" hot spot,

// display the hot spot's name and coordinates.

if (e.PostBackValue.Contains("Yes"))

{

yescount += 1;

coordinates = Vote.HotSpots[0].GetCoordinates();

hotSpotType = Vote.HotSpots[0].ToString ();

Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue + ".<br />" +

"The coordinates are " + coordinates + ".<br />" +

"The current vote count is " + yescount.ToString() +

" yes votes and " + nocount.ToString() + " no votes.";

}

// When a user clicks the "No" hot spot,

// display the hot spot's name and coordinates.

else if (e.PostBackValue.Contains("No"))

{

nocount += 1;

coordinates = Vote.HotSpots[1].GetCoordinates();

hotSpotType = Vote.HotSpots[1].ToString ();

Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue + ".<br />" +

"The coordinates are " + coordinates + ".<br />" +

"The current vote count is " + yescount.ToString() +

" yes votes and " + nocount.ToString() + " no votes.";

}

else

{

Message1.Text = "You did not click a valid hot spot region.";

}

ViewState["yescount"] = yescount;

ViewState["nocount"] = nocount;

}

</script>

<html >

<title>ImageMap Class Post Back Example</title>

</head>

<body>

<h3>ImageMap Class Post Back Example</h3>

<asp:imagemap id="Vote"

imageurl="Images/VoteImage.jpg"

width="400"

height="200"

alternatetext="Vote Yes or No"

hotspotmode="PostBack"

onclick="VoteMap_Clicked"

runat="Server">

<asp:RectangleHotSpot

top="0"

left="0"

bottom="200"

right="200"

postbackvalue="Yes"

alternatetext="Vote yes">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

top="0"

left="201"

bottom="200"

right="400"

postbackvalue="No"

alternatetext="Vote no">

</asp:RectangleHotSpot>

</asp:imagemap>

<asp:label id="Message1"

runat="Server">

</asp:label>

</form>

</body>

</html>

下面的代码示例演示如何创建一个 ImageMap 控件，该控件包含具有不同行为的作用点。将背景区域定义为回发到服务器的单个 RectangleHotSpot。在同一区域内定义了三个 RectangleHotSpot 对象。其中每个作用点的外观与按钮类似，并导航到一个 URL。在两个作用点重叠的区域中单击 ImageMap 控件时，先声明的作用点具有优先权。此示例中，先声明按钮作用点，后声明包含按钮作用点的背景作用点。因此，当用户单击按钮作用点时，用户获得的是按钮 RectangleHotSpot 对象的行为，而不是背景 RectangleHotSpot 对象的行为。若要此示例正确运行，您必须为 ImageUrl 属性提供自己的图像，并对该图像路径做相应更新，以便应用程序可以找到它。

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

void ButtonsMap_Clicked(object sender, ImageMapEventArgs e)

{

// When a user clicks the "Background" hot spot,

// display the hot spot's value.

if (e.PostBackValue == "Background")

{

string coordinates = Buttons.HotSpots[3].GetCoordinates();

Message1.Text = "You selected the " + e.PostBackValue + "<br />" +

"The coordinates are " + coordinates;

}

</script>

<html >

<title>ImageMap Class Mixed HotSpotMode Example</title>

</head>

<body>

<h3>ImageMap Class Mixed HotSpotMode Example</h3>

<!--In this scenario, the ImageMap.HotSpotMode

property is not set, because the

HotSpotMode property is set on each individual

RectangleHotSpot object to specify its behavior.-->

<asp:imagemap id="Buttons"

imageurl="Images/MixedImage.jpg"

width="350"

height="350"

alternatetext="Navigation buttons"

hotspotmode="NotSet"

onclick="ButtonsMap_Clicked"

runat="Server">

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="http://www.contoso.com"

alternatetext="Button 1"

top="50"

left="50"

bottom="100"

right="300">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="http://www.tailspintoys.com"

alternatetext="Button 2"

top="150"

left="50"

bottom="200"

right="300">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="http://www.cohowinery.com"

alternatetext="Button 3"

top="250"

left="50"

bottom="300"

right="300">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="PostBack"

PostBackValue="Background"

alternatetext="Background"

top="0"

left="0"

bottom="350"

right="350">

</asp:RectangleHotSpot>

</asp:imagemap>

<br />

<asp:label id="Message1"

runat="Server">

</asp:label>

</form>

</body>

</html>