HTML – Image Map

digitalample eye
If the image is a large image and there is a need to link multiple documents to the same image. We can divide the image into multiple sections and allows linking to each section to a different document. This technique is called image map.
An image map can be created and applied to an image so that specific portions of the image can be linked to a different file/image. Linked regions of an image map can be called hot regions and each hot region is associated with a web page,

Create Image Map – Step 1

Create an image map i.e. divide the image into various areas using <map></map> tag. <map> tag contain the attribute called Name via which the map can be referenced in an HTML file <map name= “map_name”> Within the <map></map> tag the <area> tag is specified.
It defines the specific region within the image has attribute called shape which defines the shapes of the region and can be the following:

Rect, circle, polygon, default each of the shapes takes different coordinate parameters. Cords parameter – Rect will take four coordinates: x1,y1,x2,y2 Circle will take 3 coordinates: center x, center y and radius Polygon – three or more pair of coordinates denoting a polygona region  Default – shape will not take any parameter and it indicates the portion of the image not specified under any Area tag. HREF – takes the name of the HTML file that is linked to the particular the area on this image


<map name ="sct_map">
<area shape ="rect" coords="52,65,122,89" href ="sct_htm">
<area shape ="rect" coords="148,65,217,89" href ="no_htm">

Create Image Map – Step 2

<img usemap="#map_name">
<img src ="one.gif" usemap="#sct_map">


Please enter your comment!
Please enter your name here