How to: Add ImageMap Web Server Controls to a Web Forms Page

  • Article

An ImageMap control creates a graphic with individual regions that users can click, which are called hot spots. Using an ImageMap control consists of adding the control to your Web page, specifying the image to display, and separately defining the hot spots.

To add an ImageMap Web server control to a Web Forms page

  1. Add an <asp:ImageMap> element to the page.

  2. Set the ImageMap control's ImageUrl property to the URL of the graphic that you want to display.

  3. Optionally, set the ImageMap control's HotSpotMode property to specify whether clicking the hot spot results in going to another page or in a postback.

    NoteNote

    You can override the control-wide setting for each hot spot.

To define hot spots for an ImageMap control

  1. For each hot spot, create an element of the appropriate hot-spot type and specify the coordinates for that hot-spot type, as listed in the following table:

    Hot-spot type Coordinates

    CircleHotSpot

    Radius

    Y

    RectangleHotSpot

    Top

    PolygonHotSpot

    Coordinates

    NoteNote
    You specify x- and y-coordinates as pairs. For example, a triangle consists of three pairs of x- and y-coordinates.

  2. If you want to override the control's HotSpotMode property, set the HotSpotMode property for each hot spot to specify whether clicking the hot spot results in going to another page or in a postback.

  3. If a hot spot is set to go to another page, specify the URL of the target page by setting its NavigateUrl property.

  4. If a hot spot is set to perform a postback, set the PostBackValue for the hot spot to provide information about which hot spot is clicked. You can read the value in the Click event handler.

Example

The following code example shows how to add an ImageMap control to your Web Forms page. The control contains two rectangular hot spots, a circle hot spot, and a polygon hot spot that defines a triangle.

<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" runat="server" HotSpotMode="PostBack">
  <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" 
    PostBackValue="Northeast" />
  <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" 
    PostBackValue="Southwest" />
  <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" 
    Top="100" />
  <asp:CircleHotSpot Radius="50" X="100" Y="100" 
    HotSpotMode="Navigate" 
    NavigateUrl="https://www.contoso.com/" />
  <asp:PolygonHotSpot Coordinates="0,0;100,100;200,0" 
    PostBackValue="Triangle1" />
</asp:ImageMap>

The control in the example is set to perform a postback. The individual hot spots include a postback value that can be read in the Click handler to determine which hot spot has been clicked. However, the circle hot spot overrides the control's default hot spot mode and is configured to go to a different page when a user clicks the circle area, which is specified in the CircleHotSpot object's NavigateUrl property.

See Also

Tasks

How to: Respond to User Clicks in ImageMap Web Server Controls

Concepts

ImageMap Web Server Control Overview