how to make a responsive image map when media query changed? - reactjs

Question

I had this problem with making responsive image map when I made some map on than in media queries the position of areas was changing so it make me crazy than I found this way
what is the way?

Answer 1

I was searching for long day that how I should write a code that links should not change when the position of an image changed in media queries so I found this way the best.
first go to this https://zaneray.com/responsive-image-map/ website and add your local image address from the webpage that you are working than add links in every place of your image that you want
add a div before your image and make it position relative
add the img tag and copy all the urls from that site
<div className="Afghan-map">
<img src={map} className="Afg-map" />
<a
href="your url"
title="Balkh"
className="balkh province"
/>
<a
href="hyour url"
title="Jallab abbad"
className="jallal-abbad province"
/>
<a
href="your url"
title="Badghis"
className="badghis province"
/>
<a
href="your url"
title="Kabul"
className="kabul province"
/>
<a
href="your url"
title="Herat"
className="herat province"
/>
</div>
than add your style like this.
.Afghan-map {
position: relative;
.province {
position: absolute;
z-index: 2;
}
.balkh {
left: 44.83%;
top: 21.83%;
width: 7.48%;
height: 12.1%;
}
.jallal-abbad {
left: 63.27%;
top: 43.55%;
width: 5.71%;
height: 6.25%;
}
.badghis {
left: 25.39%;
top: 34.82%;
width: 10.42%;
height: 10.22%;
}
.kabul {
left: 57.41%;
top: 41.57%;
width: 4.48%;
height: 5.56%;
}
.herat {
left: 12.81%;
top: 39.88%;
width: 12.04%;
height: 17.36%;
}
}