Creating Image Maps in HTML

Image Maps

In HTML and XHTML , an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Advantages of using Image Maps

• Image maps can provide an aesthetically pleasing alternative to cluttered pages. 
• The image map allows you to use a single image to provide links to a number of different URLs. This is especially useful if you have a website with a lot of images and you do not want to slow down the loading of pages over slow connections.  

Question

Create a web page with the following using HTML

• To embed an image map in a web page.
• To fix the hot spots.
• Show all the related information when the hot spots are clicked.

Solution

I will explain the use of hotspots by using the map of India.


The basic syntax of Image Map is

    <img src="...." usemap="#mapname">

    .

    .

    .

    <map name = "mapname">

    <area shape="Shape" coords="..." href="..."

    </map>

where coords represents the coordinates of the shape of the hotpsot.

By usemap we specify the name of the map we have to use.

href specifies the link that the page has to navigate when the hotspot is clicked.

Now here Shape can be any one of the following,

1. rect
2. poly
3. circle

rect
 
Rectangle has four coordinates. The first specifies the top left corner, and the second the bottom right corner of the rectangle.

<area shape="rect" COORDS="0,0,9,9">

circle

circle is defined by its center coordinate and its radius.

poly

A polygon is built up by a list of coordinates. They are all connected in the order you present, and the last coordinate pair is connected to the first. This way you can build arbitrary figures. For example, <area shape=poly coords="10,50,15,20,20,50"> would specify a triangle, with edge locations (10,50), (15,20) and (20,50).

Program

Now the example that I am going to demonstrate is to create an India Map and define hotspots for each state and when a state is clicked in the map the details of the state like capital, population and tourists places would be displayed.

Download the complete source code (recommended)

I will display a sample of the program alone here, you are recommended to download the full source code and see it for yourself.