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
Collapse this imageExpand this image
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.
Collapse this imageExpand this image
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"
AlternateText="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
Languages
This code sample contains the following programming languages:
Collapse this tableExpand this table
| Language | Project Name |
| Visual C# | CSASPNETImageMap |
| Visual Basic .NET | VBASPNETImageMap |
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)