This tutorial will show how to create an image map with the help of ASP.NET’s ImageMap control. An ImageMap control displays an image on a page, and when a HotSpot region defined within the ImageMap control is clicked, the control either generates a postback to the server, or navigates to a specified URL. In this tutorial we will use a simple image of earth and display a message when the HotSpot region clicked.

Setting Up

If you have not done so already, create an empty web site. To do so open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file ImageMapControl-VB and click OK. Again, right click the web site name and click Add New Item. Use ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx and click add. Also before you start, download the source code as it contains the image we will be using in this tutorial.

Step One

Right click the web site name, click Add New Folder, and name it Images. Right click the Images folder and click Add Existing Item. Browse to the directory of the Earth.jpg file and click add.

Now in the source view of Default.aspx, place an ImageMap control inside the div tags and click it to view it’s properties. Change the ImageUrl to connect to Earth.jpg in the Images folder and change the HotSpotMode to “Navigate”.

Open the HotSpots browse button to open the ‘HotSpot Collection Editor’. In the “Add” button, add the “Circle Hot Spot”. Change the ‘Radius’ to 160, ‘X’ to 275, ‘Y’ to 152, ‘AlternateText’ to Earth, ‘HotSpotMode’ to PostBack, and ‘PostBackValue’ to Earth.

Setting radius, x, and y coordinate values creates an outline around earth in the image, thus creating a hot spot. Setting the PostBackValue to Earth is a way to identify the hot spot from among other hot spots.

Step Two

Switch to design view and double click the image to generate a click event in the code behind. You should now have an ImageMap1_Click event, this is where we will determine if the hot spot is clicked and output a message box if it is. We will use an If statement that checks if the click, which is the event, has a PostBackValue of “Earth”, and if it does we will output a message box describing earth.

Output

Run the page and you will see an image of earth. Click outside of the planet first and you will notice that you can’t, this is because we did not set a HotSpot outside of earth. Now click on Earth and a message box will appear describing earth.

image map 1

Thanks for reading and make sure to download the source files to get a better understanding of how the code works.

Download Source Files