HTML map tag

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

Example

Try Yourself

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.

Example

Try Yourself

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.

Example

Try Yourself

To see how the above example work in detail, View Detail