CODEWITHSUNDEEP
javascriptcsshtml
Akshay Bharadwaj
Akshay Bharadwaj

Reputation: 95

Making Clickable areas on a image with irregular shapes

I am trying to make a image map on a Indian map for a project where clicking on each state should lead to another page. For this purpose i planned on using map and area tag. Problem is the shape of each state is not a regular figure and too many coordinates are required and also the clickable areas might intersect.

I would like to know if there is another way to achieve this task this is the image of the map i would like to work on

Upvotes: 0

Views: 443

Answers (1)

DollarChills
DollarChills

Reputation: 1086

You can use svg's to achieve this. I have created a Codepen below with a sample of a few India's states.

CODEPEN

CSS

<svg viewBox="0 0 300 200">
 <a xlink:href="#">
  <path id="IN-HP" class="land" d="M143.6,94.2l0/>
 </a>
</svg>

Grab a free SVG copy of India here: https://www.amcharts.com/svg-maps/

Upvotes: 1

Related Questions