ASP.NET - ImageMap Web 服务器控件概述（二）
2009-11-23 11:19
555 查看
五、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 >
<head id="head1" runat="server">
<title>ImageMap Class Navigate Example</title>
</head>
<body>
<form id="form1" runat="server">
<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">
<script runat="server">
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 >
<head id="head1" runat="server">
<title>ImageMap Class Post Back Example</title>
</head>
<body>
<form id="form1" runat="server">
<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>
<br /><br />
<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">
<script runat="server">
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 >
<head id="head1" runat="server">
<title>ImageMap Class Mixed HotSpotMode Example</title>
</head>
<body>
<form id="form1" runat="server">
<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>
使用 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 >
<head id="head1" runat="server">
<title>ImageMap Class Navigate Example</title>
</head>
<body>
<form id="form1" runat="server">
<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">
<script runat="server">
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 >
<head id="head1" runat="server">
<title>ImageMap Class Post Back Example</title>
</head>
<body>
<form id="form1" runat="server">
<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>
<br /><br />
<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">
<script runat="server">
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 >
<head id="head1" runat="server">
<title>ImageMap Class Mixed HotSpotMode Example</title>
</head>
<body>
<form id="form1" runat="server">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET - ImageMap Web 服务器控件概述（一）
- ASP.NET - ImageMap Web 服务器控件概述（三）
- ASP.NET - 本地化 Web 服务器控件概述
- ASP.NET - MultiView 和 View Web 服务器控件概述（三）
- ASP.NET - SiteMapPath Web 服务器控件概述
- ASP.NET - FileUpload Web 服务器控件概述（上）
- ASP.NET - MultiView 和 View Web 服务器控件概述（一）
- ASP.NET - RadioButton 和 RadioButtonList Web 服务器控件概述
- ASP.NET - Table、TableRow 和 TableCell Web 服务器控件概述
- ASP.NET - XML Web 服务器控件概述
- ASP.NET - DropDownList Web 服务器控件概述（上）
- ASP.NET - SiteMapPath Web 服务器控件概述
- ASP.NET - ImportCatalogPart Web 服务器控件概述
- ASP.NET - SiteMapDataSource Web 服务器控件概述
- ASP.NET - FileUpload Web 服务器控件概述（下）
- ASP.NET - MultiView 和 View Web 服务器控件概述（二）
- ASP.NET - SqlDataSource Web 服务器控件概述
- ASP.NET - ObjectDataSource Web 服务器控件概述
- ASP.NET - Calendar Web 服务器控件概述（中）
- ASP.NET - CatalogZone Web 服务器控件概述