introduction<area> and <map> tag in HTML
We can create an image with clickable area which can be of specific shape, using <area> and <map> tag.
name attribute value in <map> tag and usemap attribute value in <img> tag should be same.
The <area> tag is used to create clickable area with shapes.
The <map> can have more than one <area> tag.
Syntax
shape - rect or rectangle,circle,poly or polygon.
coords and shape
rect value for shape attribute
For rect shape, the value is x1,y1 and x2,y2.
In the below image we have given two points, first with x1, y1 a point is created and with x2, y2 we create a another point. Using these two points and joining them a rectangular shape is formed.
To see how the above example work in detail, Click Here
circle value for shape attribute
For a circle shape, the value is x,y,r.
x and y is specifying the center of the circle, it will decide where to move the circle.
r is specifying the value for the radius.
To see how the above example work in detail, View Detail
poly value for shape attribute
For a poly or polygon shape, the value is a set of x,y pairs for each point.
This can be unlimited numbers of pairs of points.
Every points are connected and create the shapes.
To see how the above example work in detail, View Detail