How to use HotSpot regions in the ImageMap control in ASP.NET


This article describes an All-In-One Code Framework sample that demonstrates a step-by-step guide illustrating how to use HotSpot regions in the ImageMap control in ASP.NET to build an introduction page for the Solar System. Users can click the planet in the image to navigate the iframe to the corresponding page of the planet on Wikipedia Web site.

Difficulty level

Download information

To download this code sample, click the following link:

Technical overview

Using the ImageMap control can create an image that contains defined HotSpot 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.

The ImageMap control supports three kinds of hot spot regions: RectangleHotSpot, CircleHotSpot and PolygonHotSpot. As the name implies, the RectangleHotSpot defines rectangular hot spot regions, the CircleHotSpots defines circle-shaped ones and the PolygonHotSpot is used for irregularly shaped hot spot area.

To define the region of the RectangleHotSpot object, use the Left, Top, Right and Bottom property to represent the coordinate of the region itself. For the CircleHotSpot object, set the X and the Y property to the coordinate of the centre of the circle. Then set the Radius property to the distance from the center to the edge. To define the region of a PolygonHotSpot, set the Coordinates property to a string that specifies the coordinates of each vertex of the PolygonHotSpot object. A polygon vertex is a point at which two polygon edges meet.

Sample Overview

Let us take the Planet Jupiter as an example to show how a CircleHotSpot works. Here we can see the image used in the All-In-One Code Framework sample.

As the up-left corner of the image is the origin point of the coordinate system with the X-axis extends to the right and the Y-axis extends downwards, we can get the coordinate of the center of the Planet Jupiter, which is (410,172) based on the pix computation. Also, we can obtain the radius of the planet in the image which equals to 55pix. As a conclusion, we create a CircleHotSpot in the ImageMap control with the code like this.
<asp:CircleHotSpot PostBackValue="Jupiter" 
X="410" Y="172" Radius="55"
HotSpotMode="PostBack" />

The full sample projects that are provided in the All-In-One Code Framework download package above. Besides the CircleHotSpot, it also tells how to work with the RectangleHotSpot and PolygonHotSpot. From the ReadMe note and the comments in the project, you can find the detailed steps to create these hot spots and use them to generate a post back to the server to run specific code based on the hot spot region that was clicked.

Note For more information about how to create the sample application and how to deploy the sample application, please refer to the Readme.txt file included in the download package.

Technology category

  • ASP.NET 2.0 / 3.5 / 4.0


This code sample contains the following programming languages:
LanguageProject Name
Visual C#CSASPNETImageMap
Visual Basic .NETVBASPNETImageMap


  • This sample application was created by using Visual Studio 2008 with Service Pack 1 installed.

More Information

What is All-In-One Code Framework?

All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Web site:

How to find more All-In-One Code Framework samples

To find more All-In-One Code Framework samples, you can search for kbcodefx together with related keywords on Or, you can simply click the following link:
Rapid publishing disclaimer
Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.

Article ID: 977992 - Last Review: Dec 21, 2009 - Revision: 1