Controls You Can Use on Web Forms   ASP.NET Standard Controls   ImageMap Control

---

Essentially, to create a working ImageMap control, you need to add the control to the page, specifying the image to display and separately defining the hot spots.

The below procedures show the minimum steps needed to display a functional ImageMap control.

1. Declare an <asp:imagemap> element on the page. For syntax, see ImageMap Control Syntax.
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.

   NOTE: The default behavior of a HotSpot object navigates to a URL if the HotSpotMode is not specified. You can, however, override the control-wide setting for each hot spot.

4. Optionally set the ImageMap control’s other properties.

   <asp:imagemap id = "solarsys"
         imageurl = "~/abkd/shared/images/solarsys.gif"
         width=504 height=126
         alternatetext = "Solar System"
         runat = "Server">

5. Within the ImageMap declaration, define the hot spots for the 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:

      HotSpot type	Coordinates
      CircleHotSpot	Radius Y
      RectangleHotSpot	Top
      PolygonHotSpot	Coordinates NOTE: 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.

<asp:rectanglehotspot
   alternatetext = "Sun"
   left=0 top=0 right=76 bottom=122
   hotspotmode = "Navigate"
   navigateurl = "/asp.net.ph/shared/images/sun.gif"
   target = "_blank" />

<asp:circlehotspot
   navigateurl = "/asp.net.ph/shared/images/mercury.gif"
   x=90 y=61 radius=15
   hotspotmode = "Navigate"
   alternatetext = "Mercury"
   target = "_blank" />

<asp:circlehotspot
   navigateurl = "/asp.net.ph/shared/images/venus.gif"
   x=124 y=61 radius=18
   hotspotmode = "Navigate"
   alternatetext = "Venus"
   target = "_blank" />

   ... other hot spot definitions here ...

</asp:imagemap>

 Show me 

Introduction to the ImageMap Control   Responding to Events in an ImageMap