How to: Add ImageMap Web Server Controls to a Web Forms Page
Ancontrol 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
Add an <asp:ImageMap> element to the page.
Set the ImageMap control'sproperty to the URL of the graphic that you want to display.
Optionally, set the ImageMap control'sproperty to specify whether clicking the hot spot results in going to another page or in a postback.
You can override the control-wide setting for each hot spot.
To define hot spots for an ImageMap control
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 Note
You specify x- and y-coordinates as pairs. For example, a triangle consists of three pairs of x- and y-coordinates.
If you want to override the control'sproperty, 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.
If a hot spot is set to go to another page, specify the URL of the target page by setting itsproperty.
If a hot spot is set to perform a postback, set thefor the hot spot to provide information about which hot spot is clicked. You can read the value in the event handler.
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="http://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.