The
ImageMap control in ASP.NET 2.0 and onward versions can
be used to create an image that contains defined hot spot regions. When a user
clicks a hot spot region, the control can either generate a post back to the server
or navigate to a specified URL.
There are three
kinds of hot spot regions defined in ImageMap control.
- · RectangleHotSpot
- · CircleHotSpot
- · PolygonHotSpot
The RectangleHotSpot defines
rectangular hot spot regions. The CircleHotSpotdefines circle-shaped ones
and the PolygonHotSpot is used for irregularly shaped hot spot area.
Let's have a look
at one example:
Map.aspx
<%@
Page Language="C#" AutoEventWireup="true"
CodeFile="map.aspx.cs" Inherits="map" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" >
<head
runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<table >
<tr>
<td colspan="4">
<asp:ImageMap ID="india"
runat="server" ImageUrl
="~/Map.jpg" Height="500px"
Width="887px"
HotSpotMode="PostBack" OnClick="india_Click"
BackColor="#C0C000" BorderColor="DarkSlateGray"
ForeColor="Red">
<asp:CircleHotSpot
Radius="7" X="215" Y="125"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="bhuj" AlternateText="Bhuj" />
<asp:CircleHotSpot
Radius="7" X="525" Y="95"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="patan" />
<asp:CircleHotSpot
Radius="7" X="565" Y="45"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="ambaji" />
<asp:CircleHotSpot
Radius="7" X="525" Y="150"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="me" />
<asp:CircleHotSpot
Radius="7" X="625" Y="120"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="him" />
<asp:CircleHotSpot
Radius="7" X="495" Y="195"
HotSpotMode="PostBack" NavigateUrl="~/map.aspx"
PostBackValue="sure" />
<asp:CircleHotSpot Radius="7"
X="565" Y="195" HotSpotMode="PostBack"
NavigateUrl="~/map.aspx" PostBackValue="ahd" />
</asp:ImageMap>
</td>
<td colspan="2"
style="width: 364px" align="left">
<asp:Panel ID="p1"
runat="server" Height="20px" Visible="false">
<asp:Label ID="lbl1"
Text="CITY:Bhuj STATE:Gujarat" runat ="server"
Width="162px" Height="57px"
BackColor="MediumVioletRed" Font-Bold="True"
Font-Size="Larger" ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p2"
runat="server" Height="18px" Visible="false">
<asp:Label ID="lbl2"
Text="CITY:Patan STATE:Gujarat" runat ="server"
Width="162px" Height="45px"
BackColor="MediumVioletRed" Font-Bold="True"
Font-Size="Larger" ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p3"
runat="server" Height="16px" Visible="false">
<asp:Label ID="lbl3"
Text="CITY:Ambaji STATE:Gujarat" runat ="server"
Width="160px" BackColor="MediumVioletRed"
Font-Bold="True" Font-Size="Larger"
ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p4"
runat="server" Height="14px" Visible="false">
<asp:Label ID="lbl4"
Text="CITY:Mehsana STATE:Gujarat" runat ="server"
Width="161px" BackColor="MediumVioletRed"
Font-Bold="True" Font-Size="Larger" ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p5"
runat="server" Height="14px" Visible="false">
<asp:Label ID="lbl5"
Text="CITY:Himatnagar STATE:Gujarat" runat ="server"
Width="161px" BackColor="MediumVioletRed"
Font-Bold="True" Font-Size="Larger"
ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p6"
runat="server" Height="14px" Visible="false">
<asp:Label ID="lbl6"
Text="CITY:Surendranagar STATE:Gujarat" runat ="server"
Width="90px" BackColor="MediumVioletRed"
Font-Bold="True" Font-Size="Larger"
ForeColor="Blue"></asp:Label>
</asp:Panel>
<asp:Panel ID="p7"
runat="server" Height="14px" Visible="false">
<asp:Label ID="lbl7"
Text="CITY:Ahemdabad STATE:Gujarat" runat ="server"
Width="162px" BackColor="MediumVioletRed"
Font-Bold="True" Font-Size="Larger"
ForeColor="Blue"></asp:Label>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Map.aspx.cs
using System;
using System.Data;
using System.Configuration;
using
System.Collections;
using System.Web;
using
System.Web.Security;
using System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
public partial class
map : System.Web.UI.Page
{
protected void india_Click(object sender,
ImageMapEventArgs e)
{
string aa = e.PostBackValue;
if(aa=="bhuj")
{
p1.Visible =true ;
p2.Visible = false;
p3.Visible = false;
p4.Visible = false;
p5.Visible = false;
p6.Visible = false;
p7.Visible = false;
}
else if(aa=="patan")
{
p1.Visible =false ;
p2.Visible =true ;
p3.Visible = false;
p4.Visible = false;
p5.Visible = false;
p6.Visible = false;
p7.Visible = false;
}
else if (aa == "ambaji")
{
p1.Visible = false;
p2.Visible = false;
p3.Visible = true;
p4.Visible = false;
p5.Visible = false;
p6.Visible = false;
p7.Visible = false;
}
else if (aa == "him")
{
p1.Visible = false;
p2.Visible = false;
p3.Visible = false ;
p5.Visible = true;
p4.Visible = false;
p6.Visible = false;
p7.Visible = false;
}
else if (aa == "me")
{
p1.Visible = false;
p2.Visible = false;
p3.Visible = false ;
p4.Visible = true;
p5.Visible = false;
p6.Visible = false;
p7.Visible = false;
}
else if (aa == "sure")
{
p1.Visible = false;
p2.Visible = false;
p3.Visible = false;
p5.Visible = false ;
p4.Visible = false;
p6.Visible = true;
p7.Visible = false;
}
else if (aa == "ahd")
{
p1.Visible = false;
p2.Visible = false;
p3.Visible = false;
p5.Visible = false ;
p4.Visible = false;
p7.Visible = true;
p6.Visible = false;
}
}
}
Output:
