ImageMap Example in ASP.NET using C#

In this article we will introduce with ImageMap control in ASP.NET using C#.

ImageMap Example in ASP.NET using C#

ImageMap control in ASP.NET is a part of the HTML specification. The ImageMap control to create an image that defines hotspot regions. When user click on hotspot region the control navigate on another page. Basically the use of ImageMap is to display a map of a geographical region. Each map is divided in hotspot region. When user click on the specific region of map the web page will redirect or navigate on other web page where the additional data will be displayed about that region. You can set the Image path by using ImageUrl property. Another important property is HotSpotMode. In this example we use HotSpotMode="Navigate" and CircleHotSpot for regions. In this example the ImageMap has four television. Each television is divided by CircleHotSpot region with NavigateUrl. When user click the specific region it will redirect on other web page which holds the additional information about that region.
The following are some useful property.

1. ImageUrl: Url of the Image.
2. AlternetText: Appears if image not loaded properly.
3. HotSpotMode: It has three values PostBack, Navigate and Inactive.

The following image shows how can I add CircleHotSpot with ImageMap.

ImageMap.aspx (Design Page):

ImageMap.aspx (source code):

<%@
		Page
		Title=""
		Language="C#"
		MasterPageFile="~/RoseindiaMaster.master"
		
		
		AutoEventWireup="true"
		CodeFile="ImageMap.aspx.cs"
		Inherits="ImageMap" 
		%>
		
		<asp:Content
		ID="Content1"
		
		ContentPlaceHolderID="head"
		Runat="Server">
		</asp:Content>
		<asp:Content
		ID="Content2"
		
		ContentPlaceHolderID="ContentPlaceHolder1"
		Runat="Server">
		<div>
		<h2
		style="color:Green">ImageMap 
		in ASP.NET 4 , C#</h2>
		<h3>Please 
		Click on television</h3>
		<asp:ImageMap
		ID="ImageMap1"
		runat="server"
		Height="344px"
		HotSpotMode="Navigate"
		
		ImageUrl="~/Images/televisions.jpeg"
		Width="392px">
		
		<asp:CircleHotSpot
		AlternateText="Television1"
		HotSpotMode="Navigate"
		
		NavigateUrl="~/Television1.aspx"
		Radius="70"
		Target="_top"
		X="70"
		
		Y="80"
		/>
		
		<asp:CircleHotSpot
		AlternateText="Television2"
		HotSpotMode="Navigate"
		
		NavigateUrl="~/Television2.aspx"
		Radius="70"
		Target="_top"
		X="282"
		
		Y="80"
		/>
		
		<asp:CircleHotSpot
		AlternateText="Television3"
		HotSpotMode="Navigate"
		
		NavigateUrl="~/Television3.aspx"
		Radius="70"
		Target="_top"
		X="70"
		
		Y="250"
		/>
		
		<asp:CircleHotSpot
		AlternateText="Television4"
		HotSpotMode="Navigate"
		
		NavigateUrl="~/Television4.aspx"
		Radius="70"
		Target="_top"
		X="282"
		
		Y="250"
		/>
		
		</asp:ImageMap>
		</div>
		</asp:Content>
		

Output:

The output is shown in the following figure. 

When you click the specific region(first television) it will navigate on other web page. You can see the following figure.