ImageMap Class

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.

Gets a reference to the server control's naming container, which creates a unique namespace for differentiating between server controls with the same Control.ID property value. (Inherited from Control.)

Copies any nonblank elements of the specified style to the Web control, overwriting any existing style elements of the control. This method is primarily used by control developers. (Inherited from WebControl.)

Copies the properties not encapsulated by the Style object from the specified Web server control to the Web server control that this method is called from. This method is used primarily by control developers. (Inherited from WebControl.)

Called by the ASP.NET page framework to notify server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering. (Inherited from Control.)

Infrastructure. Searches the current naming container for a server control with the specified id and an integer, specified in the pathOffset parameter, which aids in the search. You should not override this version of the FindControl method. (Inherited from Control.)

Copies any nonblank elements of the specified style to the Web control, but will not overwrite any existing style elements of the control. This method is used primarily by control developers. (Inherited from WebControl.)

Introduction

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 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 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.

Note

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.

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.

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.

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.