1. Introduction
ImageMap is a server side control, which allows you to display an image and take an action when a 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 your car model in one page and when the user clicks the parts of it (the car), the details about the part is displayed on the next page. ImageMap will fulfill this need.
In this article, I will show you the usage of the ImageMap control with the use of a 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 that is in the default page, we will display the Map of India. When you click inside the AndhraPradesh state, we will navigate to a separate page that talks about Andhra. Similarly, when we click inside the TamilNadu state, we will navigate to a separate page that talks about TamilNadu. Each of these pages have 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 web site
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 to.)
2) Right click your website on 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 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 now looks like below (refresh the Explorer, if the 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 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 picture below:
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
6) 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.
5) Open the TamilNadu.aspx page, Place an Image control and set the URL image to WMapTN.JPG. Add a label and set it's text property to The State of TamilNadu. 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 the best fit, I am going to define rectangle hot spots for the State of Andhra and Polygon hot spot for the State of TamilNadu.
For the state of Andhra, two rectangles are specified as the hotspot. You can use paintbrush to do this. Take a copy of the Image and Follow the instructions below:
1) When your cursor is at the top left of the first rectangle, the X co-ordinate specifies 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 these as the 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 define our polygon which is 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 helps 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 with 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 a 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 those points for both the rectangles using the paintbrush.
7) Set alternate text property for both the rectangle hot spot to Andhrapradesh. This text is displayed as 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 the 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 Hot spot 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 from the point you noted down using paintbrush for polygon. 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 a 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 navigated to the Andhra.aspx page
5) Click on 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