ASP.NET

Using Image Map Control in ASP.NET

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="map" %>  
  2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title>Untitled Page</title>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div>  
  12.                 <table>  
  13.                     <tr>  
  14.                         <td colspan="4">  
  15.                             <asp:ImageMap ID="india" runat="server" ImageUrl="~/Map.jpg" Height="500px" Width="887px" HotSpotMode="PostBack" OnClick="india_Click" BackColor="#C0C000" BorderColor="DarkSlateGray" ForeColor="Red">  
  16.                                 <asp:CircleHotSpot Radius="7" X="215" Y="125" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="bhuj" AlternateText="Bhuj" />  
  17.                                 <asp:CircleHotSpot Radius="7" X="525" Y="95" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="patan" />  
  18.                                 <asp:CircleHotSpot Radius="7" X="565" Y="45" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="ambaji" />  
  19.                                 <asp:CircleHotSpot Radius="7" X="525" Y="150" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="me" />  
  20.                                 <asp:CircleHotSpot Radius="7" X="625" Y="120" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="him" />  
  21.                                 <asp:CircleHotSpot Radius="7" X="495" Y="195" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="sure" />  
  22.                                 <asp:CircleHotSpot Radius="7" X="565" Y="195" HotSpotMode="PostBack" NavigateUrl="~/map.aspx" PostBackValue="ahd" /> </asp:ImageMap>  
  23.                         </td>  
  24.                         <td colspan="2" style="width: 364px">  
  25.                             <asp:Panel ID="p1" runat="server" Height="20px" Visible="false">  
  26.                                 <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>  
  27.                             </asp:Panel>  
  28.                             <asp:Panel ID="p2" runat="server" Height="18px" Visible="false">  
  29.                                 <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>  
  30.                             </asp:Panel>  
  31.                             <asp:Panel ID="p3" runat="server" Height="16px" Visible="false">  
  32.                                 <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>  
  33.                             </asp:Panel>  
  34.                             <asp:Panel ID="p4" runat="server" Height="14px" Visible="false">  
  35.                                 <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>  
  36.                             </asp:Panel>  
  37.                             <asp:Panel ID="p5" runat="server" Height="14px" Visible="false">  
  38.                                 <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>  
  39.                             </asp:Panel>  
  40.                             <asp:Panel ID="p6" runat="server" Height="14px" Visible="false">  
  41.                                 <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>  
  42.                             </asp:Panel>  
  43.                             <asp:Panel ID="p7" runat="server" Height="14px" Visible="false">  
  44.                                 <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>  
  45.                             </asp:Panel>  
  46.                         </td>  
  47.                     </tr>  
  48.                 </table>  
  49.             </div>  
  50.         </form>  
  51.     </body>  
  52.   
  53. </html>  
Map.aspx.cs
  1. using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Collections;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.WebControls;  
  9. using System.Web.UI.WebControls.WebParts;  
  10. using System.Web.UI.HtmlControls;  
  11.   
  12. public partial class map : System.Web.UI.Page  
  13. {  
  14.           
  15.     protected void india_Click(object sender, ImageMapEventArgs e)  
  16.     {  
  17.         string aa = e.PostBackValue;  
  18.         if(aa=="bhuj")  
  19.         {  
  20.             p1.Visible =true ;  
  21.             p2.Visible = false;  
  22.             p3.Visible = false;  
  23.             p4.Visible = false;  
  24.             p5.Visible = false;  
  25.             p6.Visible = false;  
  26.             p7.Visible = false;  
  27.         }  
  28.         else if(aa=="patan")  
  29.         {  
  30.             p1.Visible =false ;  
  31.             p2.Visible =true ;  
  32.             p3.Visible = false;  
  33.             p4.Visible = false;  
  34.             p5.Visible = false;  
  35.             p6.Visible = false;  
  36.             p7.Visible = false;  
  37.         }  
  38.   
  39.         else if (aa == "ambaji")  
  40.         {  
  41.             p1.Visible = false;  
  42.             p2.Visible = false;  
  43.             p3.Visible = true;  
  44.             p4.Visible = false;  
  45.             p5.Visible = false;  
  46.             p6.Visible = false;  
  47.             p7.Visible = false;  
  48.   
  49.         }  
  50.         else if (aa == "him")  
  51.         {  
  52.             p1.Visible = false;  
  53.             p2.Visible = false;  
  54.             p3.Visible = false ;  
  55.             p5.Visible = true;  
  56.             p4.Visible = false;  
  57.             p6.Visible = false;  
  58.             p7.Visible = false;  
  59.               
  60.   
  61.         }  
  62.   
  63.         else if (aa == "me")  
  64.         {  
  65.             p1.Visible = false;  
  66.             p2.Visible = false;  
  67.             p3.Visible = false ;  
  68.             p4.Visible = true;  
  69.             p5.Visible = false;  
  70.             p6.Visible = false;  
  71.             p7.Visible = false;  
  72.         }  
  73.   
  74.   
  75.         else if (aa == "sure")  
  76.         {  
  77.             p1.Visible = false;  
  78.             p2.Visible = false;  
  79.             p3.Visible = false;  
  80.             p5.Visible = false ;  
  81.             p4.Visible = false;  
  82.             p6.Visible = true;  
  83.             p7.Visible = false;  
  84.         }  
  85.   
  86.         else if (aa == "ahd")  
  87.         {  
  88.             p1.Visible = false;  
  89.             p2.Visible = false;  
  90.             p3.Visible = false;  
  91.             p5.Visible = false ;  
  92.             p4.Visible = false;  
  93.             p7.Visible = true;  
  94.             p6.Visible = false;  
  95.   
  96.         }  
  97.   
  98.     }  
  99. }  
Output:

Output
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs