What Are Image-maps In HTML?

Image Map in HTML is a technique in which multiple links are present on one image. When person click on one part of image that part will take it to Second website, if clicked of second half of the image it will take the person to third website and so on. It depends how many links are present on the image. For example, there can be multiple links on Pakistan map (Pakistan image map) by click the Punjab circle that link will take you to another site which gives the information about the cities in Punjab its culture and every think related to Punjab. Or there can be another Punjab image map which can take you to different sites of Punjab cities.

Tag for creating image map:

• .
o Attributes of Map
 Name

• Attributes of Area:
o Href
o Shape
o Coords

How to use these tags

Working of Map tag:

Working of Area Tag

<Map name="name the map"> 
<area shape="circle" coords="384,231,160" href="address">  
// for circle

<area shape="rect" coords="191,248,294,362" href="address">  
// for rectangle

<area shape="poly" coords="303,313,303,487,425,436" href="address">  
// for polly

</Map>
<img src="Image.gif" border="0" usemap="#name the map" 
alt="any text description of image" width="465" height="561">

Image maps are used in HTML to create hot spots on the images. A hot spot behaves like an active link on an image. We can have many hotspots on a single image. If we have a large image and we want to create multiple links to same image then we virtually divide the image into multiple sections and allow linking of each section to a different document. Or we want to make active link only a specific part of the image.    To create an image-map we need to have to steps. In the first step we define the map and in the second step we apply the map to the image. To create we use can use the following coding. 

  <map name=test>  <area shape="rect" cords="a,b,c,d" href="ink.html">  <area shape="circle" cords="a,b,c," href="link.html">  <area shape="poly" cords="a,b,c,d,e,f,g,h,..." href="link.html">  </map>  

  To use this map we can use 

  <img src="test.jpg" usemap="test">  

  The FrontPage can also be used to create image maps. Just insert the image and select it. The picture tool bar will be active. This bar has three shape icons i.e. Rectangular, circle and polygon. Select any icon and draw it on the tool bar. When you have finished you can see a window appears asking to specify hyperlink. Just type hyperlink and the hotspot (image-map) is created.    We can use an image map to only one image. If we want to use for multiple image then we need to create multiple image

Image Map:- In general the image map is the concept in which an image is logically separated in to different area, and by clicking each area it displays different message that is a general overview of the image map. Coming to the topic which is Image-Map in HTML with the help of image map in html one can define the list that contains all the information regarding image coordinates.

As I explained earlier that the image is logically divided in to areas and each area is hyperlinked to different sources or you can say destinations the image map is not like an ordinary image link which you click and that gets all the information from one specified resource it is all divided in to different destination for information processing.

The main idea behind this logic is to make easy links to different resources without scattering them to different locations e.g. take a world map example where we have many countries so it is more logical to combine all them and hyperlink each country image area to its destination. The image map were more difficult to design using text editors etc. but with the passage of time new application software made it easier e.g. dreamweaver, Raster Graphic Editor etc.