Good morning developers; I have not had any responses on this forum post so I assume that it has not been done before with scaling image maps and popping out images at the new coordinates.
This is what I did to fix it:
I have changed the styling to:
#mapping-area-wrapper {
margin: auto;
text-align: center;
}
#mapping-area {
position: relative;
display: inline-block;
}
#dynamic_image {
width: 100%;
max-width: 1024px;
position: relative;
}
I then places the map inside of the image tag. It was quite an odd thing to do but it worked.
<div id="mapping-area-wrapper">
<div id="mapping-area">
<img src="images/banner.png" id="dynamic_image" usemap="#dmap" onmouseover="">
<map name="dmap" id="dmap">
<area shape="circle" coords="967,73,57" pop-image="images/individual-work.png" href="#" />
<area shape="circle" coords="904,143,57" pop-image="images/group-work.png" href="#" />
<area shape="circle" coords="817,111,57" pop-image="images/encounter.png" href="#" />
<area shape="circle" coords="765,190,57" pop-image="images/present.png" href="#" />
<area shape="circle" coords="350,395,57" pop-image="images/preserve.png" href="#" />
<area shape="circle" coords="262,424,57" pop-image="images/connect.png" href="#" />
<area shape="circle" coords="180,381,57" pop-image="images/thinktank.png" href="#" />
<area shape="circle" coords="105,435,57" pop-image="images/chill-out.png" href="#" />
<area shape="rect" coords="0,40,110,310" href="#" />
</map>
<script type="text/javascript">
dynamicMapping('dynamic_image');
</script>
</img>
</div>
</div>
And finally I did something in the javascript that I do not quite understand but it solved the issue when I placed the images via the calculated coordinates.
if(element.offsetParent) {
//loop through all the parent elements and add their offset to the x and y positions.
do {
/* find out why * 0 fixed the problem for IE, Firefox and Chrome. */
x += element.offsetLeft * 0;
y += element.offsetTop * 0;
} while(element = element.offsetParent);
} else {
/* find out why * 0 fixed the problem for IE, Firefox and Chrome. */
x += element.offsetLeft * 0;
y += element.offsetTop * 0;
}
If anyone would like to view the code, feel free to do so. You can download it in the main post.