When you visit some WEB site, as an introduction page, they show you a large image with links. It seems as an image but it has different links inside it. To be able to do that we use image map feature of the HTML.
At first, you define an image and by usemap="" attribute we define a map to put links inside it.
<img src="intro.jpg" usermap="intro">
Now we need to define a map with name intro based on this image. To do that we need to use <map> tag.
<map name="intro">
</map>
<img src="intro.jpg" usermap="intro">
Now let's define the link areas . To be able to do that we need to use <area> tag. <area> tag has shape="" attribute to define the shape of the area. There are 3 types shape: rect to define rectangle, circle to define circle and poly to define a polygon. Also we need to know the coordinates of the corner points for the rectangle and polygon, coordinates of the center point and radius of the circle. You need to use coords="" attribute to defines coordinates.
<map name="intro">
<area shape="rect" coords="0,0,100,100">
<area shape="circle" coords=150,150,50">
<area shape="poly" coords="200,200,250,230,280,300,310,350">
</map>
<img src="intro.jpg" usermap="intro">
To be able to know coordinates in an image you can use paint or any other software.
Now we need to define the links for each area. To do that we need to use href="" attribute.
<map name="intro">
<area shape="rect" coords="0,0,100,100" href="rect.HTML">
<area shape="circle" coords=150,150,50" href="circle.HTML">
<area shape="poly" coords="200,200,250,230,280,300,310,350" href="poly.HTML">
</map>
<img src="intro.jpg" usermap="intro">
