ImageMap Control - ASP.Net 2.0

ImageMap is a New WebControl of ASP.Net 2.0. this is similar to the age old HTML control Map. This enables to set regions in a single image, and also sets a actions for that region. Means, if the region is clicked it will navigate to some other page or site, submits the page. A region can be created in Rectangle, polygan or in circle. The syntax is shown below with a Example.

<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" ImageUrl="~/Images/spaces.gif" OnClick="ImageMap1_Click" >
        <asp:CircleHotSpot Radius="30" PostBackValue="Circle" AccessKey="c" AlternateText="some text"  HotSpotMode="PostBack" 
                NavigateUrl="~/Trial.aspx"  TabIndex="1" Target="_blank"/>
        <asp:PolygonHotSpot Coordinates="0,0;0,30;30,30;30,0;" PostBackValue="Polygon"   />
        <asp:RectangleHotSpot Bottom="20" Right="20" PostBackValue="Rectangle"  />
</asp:ImageMap>

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
 Response.Write(e.PostBackValue.ToString());
}

The Properties used in the controls are listed:

PostBackValue - this value can be retrived by the EventArgs of ImageMap Click Event(e.PostBackValue).
AccessKey - combination alt + Specified Key makes the event triggered.
AlternateText - text in the region specified if image is not available.
HotSpotMode - decides the behavior of the event, listed below are the description of this Mode
> NotSet - No HotSpot set
> Inactive - Region set and restricted to stop firing the event.
> Navigate - Navigates to the url set by the NavigateUrl property.
> PostBack - Submits the page with PostBackValue set, triggers the Click Event.
NavigateUrl - set to get navigated to the specified URL Value, when triggered.
Target - Open the redirected url in specified target(Like same window or new window).

Image Map supports three types of region specification. Apart from the properties, the HotSpot region specifies will have a shape oriented property like Circle has radius, x and y; Rectangle has top, left, bottom and right; polygan has coordinates. a single Image map can have any no. of HotSpot's in any combinations. if same region is mention twice then the priority goes for the first specified one. the HotSpot is basically a collection, all these propeties can be set by design mode also using Property Window.

The HotSpotMode can be set in Imagemap Tag, so that the same will be applicable for all, if required it can be specified in each individual HotSpot. The PostBackValue can be set for each HotSpot, that enable to identify the region get triggered, when HotSpotMode is PostBack. the EventArgs gives the PostBackValue.