ImageMap control

  • Article

The ASP.NET ImageMap control allows you to create an image that has individual regions that users can click, which are called hot spots. Each of these hot spots can be a separate hyperlink or postback event.

To add an ImageMap control to a page

  1. Drag the ImageMap control from the Toolbox task pane to your page.

  2. Set properties that determine the ImageMap's appearance and behavior in the Tag Properties task pane.

For a full description of all ImageMap control properties, see ImageMap Properties in the MSDN library.

ImageMap Elements

The ImageMap control consists primarily of two pieces. The first is an image, which can be a graphic in any standard web graphic format, such as a .gif, .jpg, or .png file.

The second element is a collection of hotspot controls. Each hotspot control is a different element. For each hotspot control, you define its shape — a circle, rectangle, or polygon — and the coordinates that specify the location and size of the hot spot. For example, if you create a circle hot spot, you define the x and y coordinates of the circle's center and the circle's radius.

You can define as many or as few hot spots for the image as you require. You do not need to define hot spots to cover the graphic entirely.

Note

You can define overlapping hot spots. Each hot spot has a z-index value, and if a user clicks an area that is defined by two or more overlapping hot spots, the hot spot with the highest z-order is the hot spot that is selected.

To define hot spots for an ImageMap control

  1. In Design view, right-click the ImageMap control and click Properties on the shortcut menu.

  2. Click the elipsis button Cc295596.0b8d1f68-5b69-4cd1-b928-5f7bc2a6c4dc(en-us,Expression.10).gif beside the HotSpots property to open the HotSpot Collection Editor dialog box.

  3. Click the arrow on the right side of the Add button and click the type of HotSpot you want to add: CircleHotSpot, RectangleHotSpot, or PolygonHotSpot.

  4. In the Properties area, set the properties for your HotSpot.

Drawing hotspots graphically

You cannot directly graphically draw the hotspots for an ASP.NET ImageMap control, but you can use the Microsoft® Expression® Web Hotspot tools to layout the hotspots on your graphic, then copy and paste those coordinates as properties in the HotSpot Collection Editor dialog box.

To use graphically drawn coordinates in an ImageMap control

  1. Drag the image onto the page in Design view.

  2. If the Pictures toolbar is not open, open it by clicking Toolbars on the View menu, then clicking Pictures.

  3. Click the Polygonal Hotspot button, Circular Hotspot button, or RectangularHotspot button and draw the hotspot in your image. For details, see Add or modify a hotspot.

  4. In Code view, copy the coordinates of your hotspot.

  5. Right-click your ImageMap control and click Properties.

  6. Click the three dot button beside the Hotspot property to open the HotSpotCollection Editor dialog box.

  7. Select your Hotspot in the Members area.

  8. Paste the coordinate values in the appropriate property slots in the Properties area.

For example, if you draw a circle and a trianglar polygon hotspot in an image, you will see something like the following in Code view:

Example HotSpots for an image

<area href="page.htm" shape="circle" coords="177,197,84" <area href="page.htm" shape="polygon" coords="392,113,466,252,310,252" />

You can copy the circle coords and apply them to the properties of a CircleHotSpot. The first number, 177, specifies the X property. The second number, 197, specifies the Y property, and the third number, 84, specifies the Radius property.

Similarly, you can copy the polygon coords directly to the Coordinates property of a PolygonHotSpot: 392,113,466,252,310,252.

Description

You can specify what happens when a user clicks a hot spot on an ImageMap control. Each hot spots can be configured as a hyperlink that goes to a URL that you provide for that hot spot. Alternatively, you can configure the control to perform a postback when a user clicks a hot spot, providing a unique value for each hot spot. The postback raises the ImageMap control's Click event. In the event handler, you can read the unique value that you assign to each hot spot. For detailed information about responding to user clicks in an ImageMap control, see How to: Respond to User Clicks in ImageMap Web Server Controls in the MSDN library.