Image URL mapping in HTML by usemap attribute
Sometimes we need to map different area of an image with different links . For example we can see a world map on which all countries are displayed on a single image. Suppose we want to link every country with their respective link. To handle such a scenarion HTML have a good attribute named “usemap”
Usemap attribute in HTML
usemap attribute is always used with Image (<img>) tag in HTML. Usemap attribute is used to associate name or id with their corresponding area. This URL or image mapping is done through <area> tag in HTML. The <area> tag defines the clickable area of the map. To select clickable area withing the map area tag of HTML uses “Shape” attribute. There are different type of parameter can be passed within shape attribute of area tag.
Example of usemap attribute in HTML
<img src=”images/image.jpg” usemap=”#imagedimension”> <map name=”imagedimension”> <area shape=”rect” coords=”0,0,82,126” href =”india.html” alt=”india”> <area shape=”circle” coords =”100,200,200” href =”usa.html” alt=”usa”> </map>
. Here shae “rect” means “Rectangular” and “coords” attribute also accept area coordinates or rectagular area. Similarity with “Circle” as well.
To see it in action at my complementry site http://www.vishalphotostat.com/.