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.
Drag the ImageMap control from the Toolbox panel to your page.
Set properties that determine the appearance and behavior of the ImageMap in the Tag Properties panel.
For a full description of all ImageMap control properties, see ImageMap Properties in the MSDN library.
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.
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.
In Design view, right-click the ImageMap control and click Properties on the shortcut menu.
Click the ellipsis button beside the HotSpots property to open the HotSpotCollectionEditor dialog box.
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.
In the Properties area, set the properties for your HotSpot.
Drag the image onto the page in Design view.
If the Pictures toolbar is not open, open it by clicking Toolbars on the View menu, then clicking Pictures.
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.
In Code view, copy the coordinates of your hotspot.
Right-click your ImageMap control and click Properties.
Click the three dot button beside the Hotspot property to open the HotSpotCollection Editor dialog box.
Select your Hotspot in the Members area.
Paste the coordinate values in the appropriate property slots in the Properties area.
For example, if you draw a circle and a triangular polygon hotspot in an image, you will see something like the following in Code view:
<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" values 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" values directly to the Coordinates property of a PolygonHotSpot: 392,113,466,252,310,252.
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.