MAP/Image Mapping

How to map an image using HTML?


Image Mapping:
A picture or an image(jpeg, gif.,) can be used as a link to other html page by using <img>, <map> and <area> tags. The image can be used as links just by having the coordinates of shapes like rectangle or circle or polygon.
Example :
<img src="tmahal.jpeg" usemap = #imgmap border=0>
<map name=imgmap>
<area shape=Rect Coords=30,30,59,59 Href="taj.jpg" Target="_blank">
<area shape=Rect Coords=100,60,129,80 Href="elephant.gif" Target="_blank" >
Result :

In the above example the rectangular image mappings have been used. We can also use shapes like circle or polygon:
    <area shape=rect coords= x1,y1, x2,y2 Href="">
    <area shape=circle coords= x1,y1, x2,y2 Href="">
    <area shape=polygon coords= x1,y1, x2,y2 Href="">

Attributes for image area
Indicates that the text is to be formatted using the specified class.
Indicates the direction (right or left) of the text to be displayed. Useful for languages which display left to right.
You can name the text, which allows it to be referred and changed in a script (dynamic HTML).
Name of an image map.
style= "style"
Defines the style for the text to be displayed title="title"
You can give a text a title if you want. This provides some additional information about the text.

Ask Questions

Ask Question