When the user clicked on a particular piece of the overall image, the application picked out which piece of image is chosen and actions upon that particular selection.

<asp:ImageMap ID="ImageMap1" runat="server">

ImageMap Control in ASP.Net

With the new ImageMap control, you can define images with distinct regions called hot spots which are identified using coordinates. Each hotspot is independent element which can respond to user actions like postback.

Hot spots features

·         There is no limit on number of hotspots each image may contain.

·         Each hotspot is characterized by various attributes like shape, location and size.

·         Overlapping hotspots are perfectly valid.

·         Hot spots are defined using x and y coordinates.

·         Hot spots can be assigned Image URL's and are capable of postback.


<asp:ImageMap ID="Buttons" ImageUrl="asp-net.jpg" AlternateText="Navigate buttons"runat="Server" OnClick="Buttons_Click" HotSpotMode="NotSet">
<asp:RectangleHotSpot HotSpotMode="Navigate" NavigateUrl="Default.aspx"   AlternateText="Default Page" Top="30" Left="175" Bottom="110" Right="355"></asp:RectangleHotSpot>
<asp:RectangleHotSpot HotSpotMode="Navigate" NavigateUrl="Main.aspx" AlternateText="Main page" Top="155" Left="175" Bottom="240" Right="355"></asp:RectangleHotSpot>
<asp:RectangleHotSpot HotSpotMode="Navigate" NavigateUrl="test.aspx" AlternateText="Test" Top="285" Left="175" Bottom="365" Right="355"></asp:RectangleHotSpot>


ImageMap Control in ASP.Net

When you click on any region of the image then control will go to the specified page.

ImageMap Control in ASP.Net

  Modified On Mar-22-2018 07:28:28 AM

Leave Comment