Languages
[Edit]
EN

HTML - clickable link on selected area on image

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:

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.

Rectangle area link concept on image.
Rectangle area link concept on image.

Pattern:

Example:

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: xy, r.

Circle area link concept on image.
Circle area link concept on image.

Pattern:

Example:

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.

Polygon area link concept on image.
Polygon area link concept on image.

Pattern:

Example:

 

References

Edit
  1. <map> - HTML | MDN
  2. <area> - HTML | MDN

Alternative titles

  1. HTML - put link on image
  2. HTML - put link on img element
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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