February 28, 2011

ASP.Net - Understanding and Using ImageMap Control

1. Introduction

ImageMapButton is a server-side control, which allows you to display an image take an action when the particular part of the image is clicked. Think about that you are working on a Car sales website for a reputed car manufacturing company. And, your client asks to display a nice picture of their car model on one page and when the user clicks the parts of it (the car), the details about the part should be displayed on the next page. ImageButtonControl will fulfil this need.

In this article, I will show you the usage of the ImageButtonControl with the use Map of India. You can try the car model stuff yourself, as I believe this walk-through article will help you do that.

Let me first tell you, what we are going to do?

In the First Page which is the default page, we will display the Map of India. When you click on the AndhraPradesh state, we will navigate to a separate page that talks about Andhra. Similarly, when we click on the TamilNadu state, we will navigate to a separate page that talks about TamilNadu. Each of these pages has a normal image that highlights the state you clicked. Also, each page has the Go Back link to navigate to the Main Map page.

OK. Let us start our example.

2. Start a website

  1. First, start a File System based website with Visual C# as the Language. [Actually, we are not going to write any code here. But you can extend your learning if you need]
  2. Right click your website in the solution explorer, select Add New Item.
  3. From the Displayed dialog select WebForm and Name the form Andhra.aspx
  4. Add one more Web Form and Name it TamilNadu.aspx
  5. Go to Windows explorer and Browse to the Web Site Folder and create a directory called Images.
  6. Open the Attached solution, copy the content (Images! What else? ) Of the Images folder to your newly created Images folder.

The copied Images are Shown Below:

The Solution Explorer looks like below now [Refresh the Explorer, if Images folder is not displayed]:

(Forget about web.config if it is not there)

3. Image Map Button on Default page

In the default page, we are going to place the ImageMap control. So, when the website is accessed the initial page called default.aspx will display this Imagemap control.  The outline of the India will be loaded into this Imagemap control. Let us see how we can do it.

1) First, open the Default.aspx page and go to the design view.
2) Drag and drop the ImageMap control on the Page.

3) Once it is done, set the Image URL Property. Click on the small button at the end of the property value. From the displayed dialog, select Image Wmap.Jpg as shown in the below picture:

4) Click OK.

Now the ImageMap control displays the Outline of the India Map.

4. Set the Images for Other Pages

Now we will set the Images for other two pages. This time, we will use Normal Image controls. When we click the particular state; that is TamilNadu or Andhra in the ImageMap control on the Default.aspx page, we will move to the corresponding pages.

  1. Open the design view of the Andhra.aspx page.
  2. Drag and Drop the Image control on the design surface
  3. Set the Image URL property to the image WMapAP.JPG as you already did it for the ImageMap control
  4. Add a label control below the Image and set the following Text property: Andhra Pradesh. The language used here is Telugu
  5. Add a Hyperlink control below the Image. Set the Navigate property to Default.aspx. Now, when the link is clicked you will move to default.aspx page.

Open the TamilNadu.aspx page, Place an Image control and set the URL image to WMapTN.JPG. Add a label as set its text property to The State of TamilNadu. The language used is Tamil. Add a Hyperlink control to navigate back to the Default.aspx as you did for the Andhra.aspx

5. Set the HotSpots for ImageMap control

Now it is time to set the HotSpot for the ImageMap control. A HotSpot is a portion of the image, which will produce some action when it is clicked. There are three different ways to define the hotspot for an Image. The hotspot can be defined as Circle or Rectangle or Polygon. In our case even though the polygon is best suited, I am going to define rectangle hot spots for the State of Andhra and Polygon hotspot for the State of TamilNadu.

For the state of Andhra, two rectangles are specified as a hotspot. You can use the paintbrush to do this. Take a copy of the Image and Follow the instructions below:

  1. When you cursor is at the top left of the first rectangle, the X co-ordinate specified LEFT and Y co-ordinate specifies the TOP. Now drag your mouse to get the first rectangle as shown above. When you are at the Bottom right hand side corner, X co-ordinate specifies RIGHT and Y co-ordinate specifies the BOTTOM. Note Down these top, left, bottom, right co-ordinate values from the paintbrush. Do the same for the second rectangle.
  2. Now let us go to the Tamil Nadu state. Place your cursor as shown above and note down each pair of X&Y co-ordinates. These points defines our polygon which more suitable for irregular shapes.

Now you have the set of Points. The first two sets define the Rectangle and the other big pairs of X&Y define the polygon. Let us set the information collected on the paintbrush to the HotSpot property of the ImageMap control.

1) Open the Default.aspx page
2) Click the ImageMap control
3) Set the HotSpot Mode property to PostBack. This will help you to handle the events in the server immediately when a hot spot is clicked. But, in the example, we are not writing any code. You can experiment that.
4) Now click on the button […] next to the HotSpot property.
5) From the Displayed dialog, click on Add down arrow, and select RectangleHotSpot. Do it one more time, as we need to Rectangle hot spot for the State of Andhra.

6) Set the Top, Left, Bottom, Right property for both the Rectangle hot spots. Remember, you already noted down those points for both the rectangle using the paintbrush.
7) Set alternate text property for both the rectangle hotspot to Andhra Pradesh. This text is displayed as a tool tip when the mouse is on the hot spot.
8) Set the Hotspot mode for both the rectangle hot spots as Navigate. And, set Navigate URL property (Again for both rectangle hot spots) to the page Andhra.aspx. Use the dialog, which easily sets the property in the relative path notation.
9) Now add the Polygon Hotspot the same way you added the rectangle hot spots. One Polygon spot is enough.
10) Set Hotspot mode to Navigate, Set Navigate URL to TamilNadu.aspx and set the Alternate text to TamilNadu.
11) Set the Coordinates property for the point you noted down  for the polygon using the paintbrush. Put all the points as X1,Y1,X2,Y2….Xn,Yn

6. Run And Test

1) Press F5 and Run the site
2) Hover the mouse inside the state of Andhra. Once an Icon changed to Hand, stop moving the mouse and You can see the alternate text.
3) Left click when the hand icon is displayed
4) You are moved to Andhra.aspx page
5) Click the Go Back link to move to the Default page
6) Now click inside the TamilNadu, and you will be moved to Tamilnadu.aspx page.

7. How do I use the Attached Sample?

1) Download the attached zip file
2) Extract it to a folder
3) Open visual studio 2005
4) Click the menu item File|Open|Web site
5) Select the Extracted Folder

Note: The Attached solution is created in visual studio 2005

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)