ImageMap Control In Asp.net

ImageMap Control:

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.



Following are some important properties that are very useful.
ImageUrl:-
The Url of the image to be shown.
AlternetText:-
Appears if image not loaded properly
Tooltip:-
Appears when on mouse over the image
ImageAlign:-
Used to align the Text beside image.
HotSpotMode:-
PostBack/Navigate .... When Navigate, the user is navigated to a different URL. In case of PostBack, the page is posted back to the server.
HotSpots:-
It represents the hotspots collections.
There are three different types of hot spots offered by ImageMap control. They are:
o CircleHotspot
o RectangleHotspot
o PolygonHotspot
CircleHotSpot: CircleHotSpot defines circle shaped hot spot region in an ImageMap control. To define the region for a circle hot spot, we should define X and Y coordinates for circle as well as radius property which usually is the distance from the centre of circle to the edge.
RectangleHotSpot: RectangleHotSpot defines rectangle shaped hot spot region in an ImageMap control. To define the region for a Rectangle hot spot, we define Top, Bottom, Left and Right coordinates.
PolygonHotSpot: PolygonHotSpot defines polygon - shaped hot spot region in an ImageMap control. To define the region for a Polygon hot spot, we define Coordinates.

Ex:-

<div>
 <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/ImageMap1.jpg" HotSpotMode="PostBack" OnClick="ImageMap1_Click"> <asp:RectangleHotSpot Left="49" Top="36" Right="216" Bottom="148" PostBackValue="Google" /> <asp:CircleHotSpot X="368" Y="200" Radius="76" PostBackValue="Altavista" /> <asp:PolygonHotSpot Coordinates="143,187, 237,249, 222,333,107,333,76,254" PostBackValue="Yahoo" /> </asp:ImageMap> <br /> <asp:Label ID="Label1" runat="server" />
</div>

CodeView:-

  protected void imagemap_Click(object sender, ImageMapEventArgs e)
        {
            Label1.Text = "<b>Clicked hot spot</b>" + e.PostBackValue;

        }