HTML - Image Map

html image map tag, html image mapping, image into multiple sections and allows linking to each section to a different document. This technique is called image map.

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 polygonal
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

HTML CODE

<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"> 
</map> 

Create Image Map - Step 2


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

You May Also Like...

Socialize with Us