In the present article, we will be learning about the shape attribute of the HTML area tag and how it can be used to specify the shape of the area in HTML5.
We use the shape attribute of the area element to specify the shape and can be paired up with the coords attribute to specify the shape, size, and placement of the area.
Syntax:
<area shape="default/rect/circle/poly" coords="coordinate1,
corordinate2..." href="link" alt="alternate text">
Shape attribute values with their functionalities and coordinate attributes:
- default: It is used to specify the entire region of an area in HTML.
Coordinates: It has no coordinates since it spans the entire area. - rect: It is used to define a rectangular region.
Coordinates :- x1, y1 for top-left.
- x2, y2 for bottom-right.
- circle: It is used to define a circular region.
Coordinates :- x, y for the center of the circle.
- rad for the radius of the circle.
- poly: It is used to define a polygonal region.
Coordinates:- x1, y1, x2, y2 … xn, yn for edges of the polygon.
Note: If the first and last coordinate pairs are different, the last coordinate pair will be used to close the polygon.
The above has been summarized in a tabular form below :
| Functionality | Attribute Value | Coords |
| To specify the entire region. | default | (defines the entire region) |
| To define a rectangular region. | rect | x1, y1, x2, y2 – first 2 for top-left The next two for the bottom-right corner of rectangle |
| To define a circular region. | circle | x, y, rad – first two coordinates of the center of circle and the last the radius. |
| To define a polygonal region. | poly | x1, y1, x2, y2, …, xn, yn – coordinates of the edges of the polygon. In case the first and last coordinate pairs are different, the last coordinate pair will be used to close the polygon. |
Below are a couple of examples to illustrate this attribute
Example 1:
index.html
<!DOCTYPE html>
<html>
<body>
<img
class="img"
src=
usemap="#map-gfg"/>
<map name="map-gfg">
<area
shape="rect"
coords="15,32,145,104"
alt="GFG home page"
target="_blank"/>
<area
shape="poly"
coords="242,28.5,279.5,63.5,242,104,200,63.5"
href=
Cj0KCQiA7YyCBhD_ARIsALkj54qc8HT6TPpLZAcGs-r2DF38ZnTHpNJ1cVIw1PqHj4e15x-34tSr6oYaAjwUEALw_wcB"
alt="GFG data-structures course"
target="_blank"
/>
</map>
</body>
</html>
|
Output: Here, the rectangle part of the image is linked to the official page of GeeksForGeeks, and the polygon part is mapped to the DSA course by geeks for geeks. Clicking on either will direct the user to the particular link associated with the shape. We set the coordinates of a particular shape according to the image chosen by us.
Here is a short gif to demonstrate the functionality of the above example.
Example 2 :
index2.html
<!DOCTYPE html>
<html>
<body>
<center>
<img
class="img"
src=
usemap="#map-gfg"/>
</center>
<map name="map-gfg">
<area
shape="circle"
coords="91,56,30"
href=
alt="Filled Circle"
target="_blank"/>
<area
shape="rect"
coords="166,32,218,84"
href=
alt="filled square"
target="_blank"/>
</map>
</body>
</html>
|
Output: Here, we have a circle and a square (we use rect as an attribute value even for this).
