Image map using HTML

Create an Image Map

Image maps allow you to add multiple links to the same image, with each link pointing to a different page. They are particularly helpful when the image needs to be divided up in irregular shapes (such as maps). Each of these clickable areas is known as a hotspot. Consider the following example

<html>
    <title> Demonstration of Image maps</title>
    <body>
        <img src="sampleImage.jpg" usemap="#map2" height="200px" width="200px">
		
        <map name="map2">
            <!-- using rectangle, coordinates are rect(x1,y1,x2,y2) -->
            <area shape="rect" coords="0,85,54,197" alt="Green Rectangle" 
			href="red.htm" title="Green Rectangle">
            
			<!-- using rectangle, coordinates are rect(x1,y1,x2,y2) -->
			<area shape="rect" coords="1,2,198,82" alt="Red Rectangle" 
			href="green.htm" title="Red Rectangle">
			
			<!-- using circle, coordinates are circle(x1,y1,radius) -->
			<area shape="circle" coords="139,146,36" alt="Gray Circle" 
			href="gray.htm" title="Gray Circle">
				
        </map>
		
     </body>
</html>

Output :

Green Rectangle

Red Rectangle

Gray Circle