How can I create an hyperlink over an image with an irregular shape?

Question

I have the world map on a web page. Suppose the user clicks on a country. I would like to attach a specific event to the user click based on the country clicked (example: it opens the wikipedia page of the country).

How can I proceed to detect the country and/or use an irregular shape rather than the area of a circle or rectangle.

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

Try the below links,

Irregular anchors and shapes using JS in HTML/HTML5

Creating irregular shaped HTML links with image maps?

Can I use CSS hover on this complex irregular shaped link

Please do search the site before posting a question. You might find some relevant answers already present in the site.

edited May 23 '17 at 12:08

Community

1
1

answered Jul 04 '16 at 07:21

Gauthaman Sahadevan

923
1
11
19

score 0 · Answer 2 · answered Jul 04 '16 at 09:08

I suggest you to use a javascript library like D3.js
Sample 1

Sample 2

The syntax use chaining method and is really easy to ready what a line of code does:

 d3.selectAll(".country").style("stroke-width", 1.5 / s);

There are a lot of tutorial, and you want to make the country clickable and attach an event right ? well this library is awesome for that.

Starting guide

How can I create an hyperlink over an image with an irregular shape?

2 Answers2