HTML - clickable link on selected area on image
In this article, we would like to show you how to create clickable link on selected area on image in HTML.
Quick solution:
xxxxxxxxxx
<map name="map-name">
<area shape="rect" coords="17,23,147,153" href="https://dirask.com/about" />
<!-- Put more ares here ... -->
</map>
<img usemap="#map-name" src="/static/bucket/1633539280748-ymAGm6LYq6--image.png" >
Where:
shape="rect"
means clckable rect area link put on image,coords="17,23,147,153"
means(x1,x2)=(17,23)
and(x1,x2)=(17,23)
.
Note: run and click on the logo to see the result.
In this example, we create a clickable rectangle on the image using area
element's shape="rect"
attribute and specifying the coords.
The coords
attribute specifies the top-left (x1
, y1
) and bottom-right (x2
, y2
) corner of the rectangle in the following order: x1
, y1
, x2
, y2
.

Pattern:
xxxxxxxxxx
<area shape="rect" coords="x1,y2,x2,y2" href="..." />
Example:
xxxxxxxxxx
<html>
<body>
<map name="map-name">
<area shape="rect" coords="25,25,125,125" href="https://dirask.com/about" />
<!-- Put more ares here ... -->
</map>
<img usemap="#map-name" src="/static/bucket/1633538420192-k7AN9E9D90--image.png" />
</body>
</html>
In this example, we create a clickable circle on the image using area
element's shape="circle"
attribute and specifying the coords.
The coords
attribute specifies the coordinates of the circle center (x
, y
) and the radius (r
) in the following order: x
, y
, r
.

Pattern:
xxxxxxxxxx
<area shape="circle" coords="x,y,r" href="..." />
Example:
xxxxxxxxxx
<html>
<body>
<map name="map-name">
<area shape="circle" coords="75,75,50" href="https://dirask.com/about" />
<!-- Put more ares here ... -->
</map>
<img usemap="#map-name" src="/static/bucket/1668021842793-6pQmxbRAb5--image.png" />
</body>
</html>
In this example, we create a clickable polygon on the image using area
element's shape="poly"
attribute and specifying the coords.
The coords
attribute specifies the coordinates of the edges of the polygon in the following order: x1
, y1
, x2
, y2
, x3
, y3
, ... , xn
, yn
.

Pattern:
xxxxxxxxxx
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xn,yn" href="..." />
Example:
xxxxxxxxxx
<html>
<body>
<map name="map-name">
<area shape="poly" coords="75,25,155,25,200,128,35,128" href="https://dirask.com/about" />
<!-- Put more ares here ... -->
</map>
<img usemap="#map-name" src="/static/bucket/1633538830370-WXQza6NAw4--image.png" />
</body>
</html>