The following code example demonstrates how to declaratively create an ImageMap control that contains two CircleHotSpot objects. The HotSpot.HotSpotMode property is set to HotSpotMode.Navigate, which causes the page to navigate to the specified URL each time a user clicks one of the circle hot spot regions. For this example to work correctly, you must supply your own image for the ImageUrl property and update the path to the image appropriately so that the application can locate it.
<%@ Page Language="VB" %>
<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"
alternatetext="Shopping choices"
runat="Server">
<asp:circlehotspot
navigateurl="http://www.tailspintoys.com"
x="145"
y="120"
radius="75"
hotspotmode="Navigate"
alternatetext="Shop for toys">
</asp:circlehotspot>
<asp:circlehotspot
navigateurl="http://www.cohowinery.com"
x="145"
y="290"
radius="75"
hotspotmode="Navigate"
alternatetext="Shop for wine">
</asp:circlehotspot>
</asp:imagemap>
</form>
</body>
</html>
<%@ page language="C#" %>
<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>
The following code example demonstrates how to declaratively create an ImageMap control that contains two RectangleHotSpot objects. The ImageMap.HotSpotMode property is set to HotSpotMode.PostBack, which causes the page to post back to the server each time a user clicks one of the hot spot regions. For this example to work correctly, you must supply your own image for the ImageUrl property and update the path to the image appropriately so that the application can locate it.
<%@ Page Language="VB" %>
<script runat="server">
Sub VoteMap_Clicked(ByVal sender As Object, ByVal e As ImageMapEventArgs)
Dim coordinates As String
Dim hotSpotType As String
Dim yescount As Integer
Dim nocount As Integer
If (ViewState("yescount") IsNot Nothing) Then
yescount = Convert.ToInt32(ViewState("yescount"))
Else
yescount = 0
End If
If (ViewState("nocount") IsNot Nothing) Then
nocount = Convert.ToInt32(ViewState("nocount"))
Else
nocount = 0
End If
' When a user clicks the "Yes" hot spot,
' display the hot spot's name and coordinates.
If (e.PostBackValue.Contains("Yes")) Then
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.
ElseIf (e.PostBackValue.Contains("No")) Then
nocount += 1
coordinates = Vote.HotSpots.Item(1).GetCoordinates()
hotSpotType = Vote.HotSpots.Item(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."
End If
ViewState("yescount") = yescount
ViewState("nocount") = nocount
End Sub
</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>
<%@ page language="C#" %>
<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>
The following code example demonstrates how to create an ImageMap control that contains hot spots with different behaviors. The background area is a defined as a single RectangleHotSpot that posts back to the server. Three RectangleHotSpot objects are defined in the same region. Each of these hot spots looks like a button and navigates to a URL. When an ImageMap control is clicked in a region where two hot spots overlap, the hot spot that is declared first has precedence. In this example, the button hot spots are declared first and the background hot spot that contains them is declared last. Therefore, the user gets the behavior of the button RectangleHotSpot object, not the background RectangleHotSpot object, when the user clicks a button hot spot. For this example to work correctly, you must supply your own image for the ImageUrl property and update the path to the image appropriately so that the application can locate it.
<%@ page language="VB" %>
<script runat="server">
Sub ButtonsMap_Clicked(ByVal sender As Object, ByVal e As ImageMapEventArgs)
' When a user clicks the "Background" hot spot,
' display the hot spot's value.
If (e.PostBackValue = "Background") Then
Dim coordinates As String
coordinates = Buttons.HotSpots(3).GetCoordinates()
Message1.Text = "You selected the " & e.PostBackValue & "<br>" & _
"The coordinates are " & coordinates
End If
End Sub
</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="Navigate 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>
<%@ page language="C#" %>
<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="Navigate 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>