Export (0) Print
Expand All
6 out of 8 rated this helpful - Rate this topic

ImageMap Class

Note: This class is new in the .NET Framework version 2.0.

Creates a control that displays an image on a page. When a hot spot region defined within the ImageMap control is clicked, the control either generates a postback to the server or navigates to a specified URL.

Namespace: System.Web.UI.WebControls
Assembly: System.Web (in system.web.dll)

public class ImageMap : Image, IPostBackEventHandler
public class ImageMap extends Image implements IPostBackEventHandler
public class ImageMap extends Image implements IPostBackEventHandler

Use the ImageMap control to create an image that contains defined hot spot regions. When a user clicks a hot spot region, the control can either generate a postback to the server or navigate to a specified URL. For example, you can use this control to display a map of a geographical region. When a user clicks a specific region on the map, the control navigates to a URL that provides additional data about the selected region. You can also use this control to generate a postback to the server and run specific code based on the hot spot region that was clicked. For example, you can use an ImageMap control to capture user responses such as votes. When a user clicks the hot spot region defined for yes votes, code is called to record a yes response in a database. When a user clicks on the hot spot region defined for no votes, a no response is recorded. You can also mix these two scenarios within a single ImageMap control. For example, you can specify one hot spot region to navigate to a URL and another hot spot region to post back to the server.

Use the ImageUrl property to specify the path to the image to display for the ImageMap control. You can define any number of HotSpot objects within an ImageMap control. You can use the CircleHotSpot, RectangleHotSpot, and PolygonHotSpot classes to define hot spot regions. Alternatively, you can derive from the abstract HotSpot class to define your own custom hot spot object.

There are two ways to specify the behavior of a HotSpot object in an ImageMap control when the HotSpot is clicked. You can use either the HotSpotMode property on the ImageMap control or the HotSpotMode property on an individual HotSpot object. These properties are set using one of the HotSpotMode enumeration values. If both properties are set, the HotSpotMode property specified on each individual HotSpot object takes precedence over the HotSpotMode property on the ImageMap control.

To navigate to a URL, set either the ImageMap.HotSpotMode property or the HotSpot.HotSpotMode property to HotSpotMode.Navigate. Use the NavigateUrl property to specify the URL to navigate to.

To generate a postback to the server, set either the ImageMap.HotSpotMode property or the HotSpot.HotSpotMode property to HotSpotMode.Postback. Use the PostBackValue property to specify a name for the hot spot region. This name will be passed in the ImageMapEventArgs event data when a postback event occurs. When a postback HotSpot is clicked, the Click event is raised. To programmatically control the actions performed when a postback HotSpot is clicked, provide an event handler for the Click event.

To cause all HotSpot objects in an ImageMap control to have the same behavior, use the ImageMap.HotSpotMode property to specify the behavior. Then, either set the HotSpot.HotSpotMode property on each individual HotSpot object to HotSpotMode.NotSet or do not specify a value for the HotSpot.HotSpotMode property.

To specify different behaviors for HotSpot objects in an ImageMap, set the HotSpot.HotSpotMode property on each individual HotSpot object to either HotSpotMode.Navigate or HotSpotMode.PostBack.

NoteNote

If an ImageMap control's ImageMap.HotSpotMode property or the HotSpot.HotSpotMode property on any of the HotSpot objects it contains is set to HotSpotMode.NotSet or is not set to a value, by default the behavior is HotSpotMode.Navigate.

Accessibility

The markup rendered by default for this control might not conform to accessibility standards such as the Web Content Accessibility Guidelines 1.0 (WCAG) priority 1 guidelines. For details about accessibility support for this control, see ASP.NET Controls and Accessibility.

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="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="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="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>

System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
       System.Web.UI.WebControls.Image
        System.Web.UI.WebControls.ImageMap
Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 98, Windows 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see System Requirements.

.NET Framework

Supported in: 2.0
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.