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

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

六、CircleHotSpot 类

在 ImageMap 控件中定义圆形作用点区域。无法继承此类。

此类在 ImageMap 控件中定义一个圆形作用点区域。若要定义 CircleHotSpot 对象区域，请将 X 属性设置为表示圆形区域中心的 x 坐标的值。将 Y 属性设置为表示圆形区域中心的 y 坐标的值。将 Radius 属性设置为从圆心到边的距离。

当单击 CircleHotSpot 控件时，该页定位到 URL，生成到服务器的回发，或不执行任何操作。HotSpotMode 属性指定此行为。若要定位到 URL，请将 HotSpotMode 属性设置为 HotSpotMode.Navigate，并使用 NavigateUrl 属性指定要定位到的 URL。要回发到服务器，请将 HotSpotMode 属性设置为 HotSpotMode.PostBack，并使用 PostBackValue 属性为 CircleHotSpot 对象指定名称。单击 CircleHotSpot 时，此名称将传入 ImageMapEventArgs 事件数据。如果要使 CircleHotSpot 对象不具有任何行为，请将 HotSpotMode 属性设置为 HotSpotMode.Inactive。

示例

下面的代码示例演示如何以声明方式创建包含两个 CircleHotSpot 对象的 ImageMap 控件。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 控件中定义一个矩形作用点区域。若要定义 RectangleHotSpot 对象的区域，请将 Left 属性设置为表示该矩形区域左上角的 x 坐标的值。将 Top 属性设置为表示该矩形区域左上角的 y 坐标的值。将 Right 属性设置为表示该矩形区域右下角的 x 坐标的值。将 Bottom 属性设置为表示该矩形区域右下角的 y 坐标的值。

单击 RectangleHotSpot 控件以后，相应页导航到一个 URL，产生一个到服务器的回发，或者不执行任何操作。HotSpotMode 属性指定此行为。若要导航到一个 URL，请将 HotSpotMode 属性设置为 HotSpotMode.Navigate，并使用 NavigateUrl 属性指定要导航到的 URL。若要回发到服务器，请将 HotSpotMode 属性设置为 HotSpotMode.PostBack，并使用 PostBackValue 属性为 RectangleHotSpot 对象指定名称。单击 RectangleHotSpot 以后，此名称将在 ImageMapEventArgs 事件数据中传递。. 如果要使 HotSpot 对象不具有任何行为，请将 HotSpotMode 属性设置为 HotSpotMode.Inactive。

示例

下面的代码示例演示如何以声明方式创建包含两个 RectangleHotSpot 对象的 ImageMap 控件。ImageMap..::.HotSpotMode 属性被设置为 HotSpotMode.PostBack，这导致每当用户单击某个作用点区域时该页都回发给服务器。只要用户单击一个 RectangleHotSpot 对象，就会调用 GetCoordinates 方法，并为用户显示选定作用点的坐标。若要此示例正确运行，您必须为 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>

八、PolygonHotSpot 类

在 ImageMap 控件中定义多边形作用点区域。无法继承此类。

此类在 ImageMap 控件中定义一个多边形作用点区域。在 ImageMap 控件中定义不规则形状的作用点区域时，PolygonHotSpot 很有用。例如，在地图中可以使用它来定义单独区域。

若要定义 PolygonHotSpot 区域，请将 Coordinates 属性设置为指定 PolygonHotSpot 对象每个顶点的坐标的字符串。多边形顶点是两条多边形边的交点。

当单击 PolygonHotSpot 对象时，该页定位到 URL，生成到服务器的回发，或不执行任何操作。HotSpotMode 属性指定此行为。若要定位到 URL，请将 HotSpotMode 属性设置为 HotSpotMode.Navigate，并使用 NavigateUrl 属性指定要定位到的 URL。若要回发到服务器，请将 HotSpotMode 属性设置为 HotSpotMode.PostBack，并使用 PostBackValue 属性为 PolygonHotSpot 对象指定名称。单击 PolygonHotSpot 时，此名称将传入 ImageMapEventArgs 事件数据。如果要使 PolygonHotSpot 对象不具有任何行为，请将 HotSpotMode 属性设置为 HotSpotMode.Inactive。

示例

下面的代码示例演示如何创建包含三个 PolygonHotSpot 对象的 ImageMap 控件。每个 PolygonHotSpot 对象都表示地图上的一个地理区域。用户单击 PolygonHotSpot 对象时，该对象将回发到服务器，而作用点的类型和名称将显示在标签中。

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

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

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

void RegionMap_Clicked (object sender, ImageMapEventArgs e)

{

string hotSpotType;

// When a user clicks a hot spot, display

// the hot spot's type and name.

switch (e.PostBackValue)

{

case "Western":

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

Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue;

break;

case "Northern":

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

Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue;

break;

case "Southern":

hotSpotType = Regions.HotSpots[2].ToString();

Message1.Text = "You selected " + hotSpotType + " " + e.PostBackValue;

break;

default:

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

break;

}

</script>

<html >

<title>PolygonHotSpot Class Example</title>

</head>

<body>

<h3>PolygonHotSpot Example</h3>

<!-- Change or remove the width and height attributes as

appropriate for your image. -->

<asp:imagemap id="Regions"

imageurl="Images/RegionMap.jpg"

alternatetext="Sales regions"

hotspotmode="PostBack"

width="400"

height="400"

onclick="RegionMap_Clicked"

runat="Server">

<asp:PolygonHotSpot

coordinates="0,0,176,0,125,182,227,400,0,400"

postbackvalue="Western"

alternatetext="Western Region">

</asp:PolygonHotSpot>

<asp:PolygonHotSpot

coordinates="177,0,400,0,400,223,335,154,127,180"

postbackvalue="Northern"

alternatetext="Northern Region">

</asp:PolygonHotSpot>

<asp:PolygonHotSpot

coordinates="128,185,335,157,400,224,400,400,228,400"

postbackvalue="Southern"

alternatetext="Southern Region">

</asp:PolygonHotSpot>

</asp:imagemap>

<asp:label id="Message1"

runat="Server">

</asp:label>

</form>

</body>

</html>