1. Introduction to ImageMap and HotSpots

An ImageMap Control is an ASP.Net Web Control to mark specific portions of the Image. When a user clicks that specific portion, the ImageMap Control can either do a post back or navigate to an URL. This marked down portion is called HotSpot of an Image. In this example, we will mark specific states of USA by defining HotSpots in it and navigate to a URL specific to the selected state.

2. Download Image With Modification Rights

This example requires an outline map of the United States with proper copyright which allows modification. First, we should use the image search of google to find the map of USA. The search term is ‘USA Map Outline with States Name’. Once google lists the maps, pick an Image marked as ‘Labeled for reuse with modification‘. We can do this through the usage rights drop-down box. The below picture shows the steps involved. We have to pick the second image and store it in the local system. Note, as per the usage rights, we can change and reuse the image.

3. Create Images for Highlighted States

Now we have the States outline map of the USA. We will highlight the States and save it as a separate image. In this example, we need to highlight four States and they are: Colorado, Oklahoma, Idaho, Oregon. The below picture shows how to highlight the Oregon State in Window’s Paint Brush.

The above picture shows that we used the ‘Fill Color’ tool to highlight the State of Oregon with Green Color. The same way, we can highlight all other States and save it as separate image files. At the end, we have five image files. One for the State outline and other four are for specific States. The below picture shows the saved images from the C:\Temp\Images folder.

4. Create ASP.NET Website

The images are ready for this example. Now, we will create the Website Project in Visual Studio. The Steps are below:

1. Open Visual Studio and then Click on File => New => Web Site…
2. From the New Web Site dialog box, Select ‘Asp.Net Web Site’
3. Select ‘File System’ as the location type
4. Select ‘Visual C#’ as the language
5. Click on the Browse button
6. Select the File System in the Choose Location dialog box
7. Select a directory for the Web Site
8. Add a name for the solution as shown in picture below
9. Click on the OK button

The below picture shows these steps and we will get an ASP.Net solution called ‘ImageMap’:

Next, we have to right click the project name (Not Solution) and select ‘New Folder’ option from the context menu. We can Name this folder as ‘Images’. Copy the contents of C:\Temp\Images where we saved all our images in the earlier section of this article. Then we should right-click on the Images folder in the ‘Project Explorer’ and pick the ‘Paste’ option. This step will copy all our images to project location and Images folder. The below picture shows the contents of the Images folder in the Solution Explorer.

5. Setup Web Page With ImageMap Control

In the previous section, when we created project, visual studio created a default page under the file name ‘Default.aspx’. In this file drop the ‘ImageMap Control’ and the below picture shows the control on the default web page:

This default page is the startup page for our example. In this page, on the ImageMap Control, we will display the outline map the USA. The ‘

ImageUrl Property

’ of the ImageMap Control sets image location for the Control. The below picture shows how to set the ‘USA-Map.png’ to our Control. Note, sometimes Visual Studio will not display the image in design view because of refresh issue and we can ignore it.

6. Add Pages For The States

Now, we will create a web page for each highlighted image. The steps below shows how to create a page for the Oregon State:

1. Right click on the project name.
2. Pick the ‘Add New Item…’ option from the context menu.
3. From the Template List, Pick the ‘Web Form’ item.
4. Provide a name for the Web Form. Since we are creating page for the state of Oregon, we can name it as Oregon.aspx
5. Click on the add button

The below picture shows the steps involved in creating the Oregon.aspx page:

We can follow the same steps to create pages for the other states Colorado, Idaho, Oklahoma. After making all Web Form based pages, the solution explorer look like this:

7. State Pages and Home Page

7.1 Setup State Pages

In the previous section, we have four pages created for the States. Now, we will place the images on each page and also provide a link to Home Page. The below steps show how to set an image to the Colorado.aspx:

1. Open the Colorado.aspx page and drop the Image Control from the toolbox. Note, this is not an ‘ImageMap’ Control.
2. Right Click the control on the page and Pick Properties. Click on the ImageURL Property. Then click the ‘…’ button to Open the ‘Select Image’ dialog.
3. Click Images Node from the left Pane.
4. Pick the image Colorado-State.png.
5. Click on the OK button.

The steps are shown in the below picture and one can repeat the same steps for three other State Pages:

7.2 Establish Home Page Link

Now, we will add a

HyperLink Control

to each of our state pages. These link will bring back the user to home page which has ImageMap Control on it. The steps below shows adding Home page link:

1. Drop ‘HyperLink Control’ to the each pages for the State. Then set ‘Text Property’ to Home.
2. Click on the ‘…’ button for the ‘NavigateUrl Property’ of the HyperLink Control.
3. Click the Root Node in the Select URL dialog.
4. Select Default.aspx page. Note, this where we want to land when user click the Home link.
5. Click on the OK button.

The picture below shows all the above five steps. Use these steps to create a Home link for the all the State pages.

Now, user can go to the startup page by clicking the link to the Home button. Note, we have not yet set navigation from the Home Page to State Pages. We perform that in the following sections. Below is the completed page setup for the Oregon State. Note, one can use the Label control to display some informative text above the image.

8. Gather HotSpots of ImageMap Control

A group of ‘HotSpot’ defines a specific area in the Image. An ImageMap can have a multiple group of HotSpots to mark down different portions of the image.

8.1 Define Rectangle Hotspots

First, we will capture the coordinate values for Colorado State. The below picture shows the hot points collected for Colorado State.

First, we will open a paintbrush and notepad and then load USA outline map into it. The Paintbrush will help us in marking down the coordinates for the Colorado State. In the above picture, first we placed the cursor in the Top, Left of the Colorado State outline which looks like a rectangle. Then marked down the Left and Top value from the lower left corner of the paintbrush. Then the same way we marked the Right and Bottom of the rectangle. These values are shown in the notepad. All these four values defines a single Rectangle Hotspot.

Next, we will mark the coordinate value for the Oklahoma State. In the below picture, we can see marked rectangle as Black and Red. So, these two rectangle coordinate values together defines the hotspot for the Oklahoma State.

8.2 Define Polygon HotSpot Values

A rectangle hot spot requires a two pair of points to specify the Top-Left and Bottom-Right of the rectangle. In polygon each point defines the region. Say, for example, for a triangle we need three polygon points.

The below picture shows how we collected these polygon points to define the Idaho region with Polygon Hotspot. Note, we are using the paintbrush again to capture these points. Also note, a rectangle Hotspot not suitable to define this state based on its outline. The picture is below:

In the last image snippet, if we connect all the polygon points with a straight line, we get the hot spot region for Idaho State. The same way we can capture the polygon points for the Oregon State. Note, one can combine Polygon Hotspot with a Rectangle Hotspot as well. The below picture shows polygon hot spot points for the Oregon:

Now, we have all the coordinate values. Let us specify these points for our ImageMap Control.

9. Setup ImageMap Control with HotSpots

We had saved all the HotSpot points needed to define a specific region in our ImageMap Control. Now, we will provide these inputs to the

HotSpot Property

 of ImageMap Control. This Property is a collection and we can add multiple HotSpots into this Property. To access this collection, one should right click the ImageMap Control, and click the ‘…’ button on the HotSpot Property.

9.1 ImageMap Control’s Rectangle HotSpot for Colorado

First, we will add Hot-Spot for the Colorado State. The steps are in the below Picture:

The Steps are:

1. Open the Hot-Spot Collection Editor and click on the down-arrow button next to the Add Button.
2. Select RectangleHotSpot entry. This will add an entry in ‘Members:’ list.
3. Set the Properties Bottom, Left, Right and Top. Refer the points noted in the previous section or Refer the image ‘Hot-Spot Coordinate values for Colorado State’ from previous section.
4. Set HotSpotMode Property as Navigate. This tells the ImageMap Control that navigate to a specific page when this Rectangle Hot-Spot is clicked.
5. Set NavigateUrl Property to Colorado.aspx Page. Now, when the user clicks the Rectangle Hot-Spot, they navigate to Colorado State Page from Default Startup Page.
6. Click OK to accept the HotSpot.

9.2 Two Rectangle Hotspot for Oklahoma

Next, we add two rectangle Hot-Spots for the Oklahoma state. Both the Hot-Spots identified as 1 and 2 navigates to Oklahoma page. The below picture shows the Hot-Spot Settings:

9.3 ImageMap Control’s Polygon Hotspots for Idaho & Oregon

Next, we define Polygon HotSpot for the Idaho State. The Coordinate Property takes a sequence of points which defines the Polygon Region in our ImageMap Control. In our case we provided all the captured points as a comma-separated list. Note, the point sequence should be in x, y pairs. The below picture shows the Polygon HotSpot for Idaho State.

Finally, we specified one more Polygon Hot-Spot for the Oregon State. Below is the Polygon Hot-Spot setting for Oregon State.

10. Running the ImageMap Control Example

We defined all HotSpots for the ImageMap Control. Now we can build the project once and launch the default.aspx page in a browser. We can select the state to move to the state specific pages. Also, note the change in cursor when it moves to the Hot-Spot.

• Calendar Control Properties Explained
• Custom Foreach Example Using IEnumerator and IEnumerable

Categories: Asp 2.0

Tags: Hotspot Collection, HotSpotMode, ImageURL, Polygon Hotspot, Rectangle Hotspot

This site uses Akismet to reduce spam. Learn how your comment data is processed.