In this tutorial I will be telling you about making some areas in a particular image clickable. This technique is done by using the HTML Map element. It is called Image-Map.

 

How it Works?

ImageMaps use the HTML Area tag to define selective areas inside images by defining co-ordinates, and the HTML A tag to give a link to that area. Making ImageMaps is very simple by following the process given below. All you need to have is any photo editor/viewer with rulers (like MS Paint or IrfanView) and a suitable image (in which you wish to make clickable areas)

​

​

​

​

​

​

​

​

​

​

​

​

 

​

How can it be done?

1. First of all open your HTML file and place your image in it using the IMG tag. Be sure to give it a defined height and width. Place the usemap attribute replacing xyz with your map's name that you will create in the next step. 

    <img src="Sample.png" width=500 height=332 usemap="xyz">

​

 2. Create a map to overlay the image. The map code is quite simple. It looks like this:

     <map name="xyz"> </map>

​

 3. Now comes creating clickable areas. First we need to know about the co-ordinates of the area we have to make clickable. Open your image in a photo editor/viewer like MS Paint and   switch on Rulers. We shall now be finding out the co-ordinates of the area which is to be          made clickable. It is even easier to auto-generate co-ordinates using the ImageMap Co-             ordinate Generator.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 4. Now we see our area (one which has to be made clickable) has 4 corners. So we need to get        the co-ordinates for each corner. The corners our defined in the order: Top Left, Top Right,        Bottom Right, Bottom Left. For each corner first we will choose the vertical co-ordinate and        then the horizontal co-ordinate. For example - for the top left corner the co-ordinates will          be 8 by 125 pixels (8 pixels on vertical ruler and 125 pixels on horizontal ruler). Same way        co-ordinates for other corners will be:

• Top right: 221 by 25 pixels

• Bottom right: 421 by 270 pixels

• Bottom left: 214 by 378 pixels

​

 5. Let's put the co-ordinates in the code. This code comes inside the MAP tag we placed in Step 2.       Modify the co-ordinates and link as per your choice.  Note that the co-ordinates are placed in the       order Top Left, Top Right, Bottom Right, Bottom Left.  

   <area href="xyz.com" shape=poly coords="8,125,221,25,421,270,214,378"> 

​

 6. The total code will look something like this:

   <img src="Sample.png" width=500 height=332 usemap="#xyz"> 
   <map name="xyz"> 

   <area href="xyz.com" shape=poly coords="8,125,221,25,421,270,214,378">

   </map>   
 

 7. It is done! Run the file and you shall be able to see a clickable area in the image. Here is the           result of our sample image below!

 

 

 

 

 

​
 

​

​