I found this Solution from the web... This Totally Solved my Problem. Please check this link for the origin. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
 * so if you resize the page and run the script again, 
 * it points to the correct new position of the element.
 */
function findPos(obj){
   var curleft = 0;
   var curtop = 0;

   if (obj.offsetParent) {
      do {
         curleft += obj.offsetLeft;
         curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);

      return {X:curleft,Y:curtop};
   }
}

Works Perfectly in Firefox, IE8, Opera (Hope in others too) Thanks to those who share their knowledge... Regards,

ADynaMic

if you want to add text, then you better use real links and set them on top of your areas wich are quiet good rectangle.

example:

.map {
  position: relative;
}

.map img {
  display: block;
  width: 100%;
}

.map a {
  position: absolute;
  top: 48.6%;
  left: 9.118%;
  width: 19.8%;
  height: 19%;
  transform: rotate(-1.375deg);
  border-radius: 50% 50% 0px 0 / 0.25vw;
  transition: 0.5s;
  color:#3F4754;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4vw;
  font-weight:bold;
  font-family:courier;
  font-variant:small-caps;
  text-decoration:none;
  text-shadow:-2px -2px 2px black
}

.map a + a {
  top: 48%;
  left: 70%;
  transform: rotate(3deg);
  transform-origin: bottom right
}

a:hover {
  color: white;
  background:linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), transparent);
  text-shadow:2px 2px 2px black
}

<div class="map">
  <img src="https://i.sstatic.net/mDEuy.jpg" />
  <a href="#1">hover me</a>
  <a href="#2">or me</a>
</div>

use your own style and ids or class