Dynamic Image Map Resizing

JavaScript
1

Good evening developers. I need some assistance with a piece of code that I’ve been working on. The code dynamically resizes an image map according to the resizing of an image. It keeps the aspect ratio. When the browser is resized the image resizes with it and so does the image map. I have also added something extra to make images pop out when you enter over the map areas with your mouse. The problem that I am faced with is that it works 100% in Firefox but not in IE or Google Chrome. The popup images does not display correctly in those two browsers and I have not yet tested it in Safari.

You can view a live sample here: (reload the page if it’s not working immediately)
http://kobusbeets.co.za/dynamic-image-mapping/

The source can be downloaded here:
http://kobusbeets.co.za/wp-content/uploads/dynamic-image-mapping.zip

I am planning to make this available for free downloads when it’s working properly across most if not all browsers.

Any assistance or advice would be much appreciated.

2

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.