Languages
[Edit]
EN

HTML - clickable link on selected area on image

0 points
Created by:
Isaiah89
361

In this article, we would like to show you how to create clickable link on selected area on image in HTML.

Quick solution:

// ONLINE-RUNNER:browser;

<map name="map-name">
  <area shape="rect" coords="17,23,147,153" href="#" target="_blank" >
</map>
<img usemap="#map-name" src="/static/bucket/1633539280748-ymAGm6LYq6--image.png" >

Note:

Run and click on the logo to see the result.

 

1. Rectangle

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.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <map name="map-name">
  <area shape="rect" coords="25,25,125,125" href="#" target="_blank">
</map>
<img usemap="#map-name" src="/static/bucket/1633538420192-k7AN9E9D90--image.png" alt="350 x 150 pic">
</body>
</html>

2. Circle

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 and the radius (x, y, radius).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <map name="map-name">
  <area shape="circle" coords="75,75,75" href="#" target="_blank">
</map>
<img usemap="#map-name" src="/static/bucket/1633537261740-eWYaK8yAoX--image.png" alt="350 x 150 pic">
</body>
</html>

3. Polygon

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, ... , xn, yn.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <map name="map-name">
    <area shape="poly" coords="75,25,155,25,200,128,35,128" href="#" target="_blank">
  </map>
  <img usemap="#map-name" src="/static/bucket/1633538830370-WXQza6NAw4--image.png" alt="350 x 150 pic">
</body>
</html>

References

  1. <map> - HTML | MDN
  2. <area> - HTML | MDN
Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join