[Edit]

HTML - clickable link on selected area on image

1 contributors

2 contributions

0 discussions

3 points

Created by:

Isaiah89

721

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

Auto running

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.

Different variants

Edit

1. Rectangle areas

Edit

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
 
<!doctype html>
<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>

Auto running

2. Circle areas

Edit

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
 
<!doctype html>
<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>

Auto running

3. Polygon areas

Edit

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
 
<!doctype html>
<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>