ImageMap Control

How to use ImageMap in asp.net:

The ASP.NET Programming Image Map allows to user to create an image that has different-2 regions  in which user can click, These Image regions  are called hot spots. Each hot spot can be a separate by hyperlink or postback event of asp.net.

It is server side control which is defined in stander control in asp.net toolbox.  This control released in ASP.NET version 2.0. It enables user to turn an image into a navigation menu (Group of links).

ImageMap  on asp.net web page:

Drag and drop  the Image Map  from the Toolbox  to your page.Set properties  and behavior of  ImageMap.

asp.net ImageMap Server controls

Define Image hot spots for an Image Map:

In Design view of web page, right-click the ImageMap control and then click Properties on the menu. Click the ellipsis button beside the Hotspots property to open the Hotspot Collection Editor Dialog box. Click the arrow on the right side of the Add button and click the type of Hotspots you want to add: Circle Hotspot, Rectangle Hotspots, or Polygon Hotspot. In the Properties area, set the properties for your Hotspot.

Hot spots features of ImageMap:

There is no limit on number of hotspots each image may contain. You can create as you like.

• Each hotspot is dividing by various attributes like shape, locations and size.
• Overlapping hotspots are perfectly valid( refer no action).
• Hot spots are defined using x-axis and y-axis coordinates.
• Hot spots assigned Image URL's and are capable of post back.

Different types of hot spots

There are three main different types of hot spots offered by Image Map control. They are:

• Circle Hotspot
• Rectangle Hotspot
• Polygon Hotspot

Suppose you are working on marketing web site which contains whole country recorded. And the user want a map on main page of country And on click state on this map then he move to a particular state page where only state related records are display. Then for solving this type of requirement you need to use ImageMap asp.net control. And create hot spots on the Image map control.

<asp:ImageMap ID="ImageMap2" ImageUrl="~/map.gif" HotSpotMode="Navigate" runat="server">
         <asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="300"AlternateText="NorthAmerica" NavigateUrl ="http://www.northamericatravelservice.co.uk/"/>
        <asp:RectangleHotSpot Top="256" Bottom="500" Left="0" Right="300"AlternateText="SouthAmerica" NavigateUrl ="http://www.travel.org/south.html" />
        </asp:ImageMap>

See the Example of Image MapOther Post :

• Example of header checkbox.
• Asp.net checkbox with Gridview control.
• Checkboxlist Using JavaScript.
• Asp.net checkList control.
• Label Control in asp.net.
• Textbox asp.net control
• Get subString from String Using JS.
• ImageButton Control
• Example of asp.net ImageButton control
• Watch video here
• Validate ASP.Net RadioButtonList using JavaScript Example