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.

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

Languages

This code sample contains the following programming languages:

Prerequisites

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

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:
http://cfx.codeplex.com (http://cfx.codeplex.com)

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 support.microsoft.com. Or, you can simply click the following link:
http://support.microsoft.com/search/default.aspx?query=kbcodefx (http://support.microsoft.com/search/default.aspx?query=kbcodefx)

For more information, visit the following Web sites:

• MSDN: ImageMap Class (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagemap.aspx)
• MSDN: RectangleHotSpot Class (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.rectanglehotspot.aspx)
• MSDN: CircleHotSpot Class (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.circlehotspot.aspx)
• MSDN: PolygonHotSpot Class (http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.polygonhotspot.aspx)