Post
Ask Question

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
Next Recommended Reading How To Crop Image And Save Image In ASP.NET Using jQuery