The purpose is to separate image and area part by using CSS cursor style.
When cursor becomes a hand, user can know he is hovering on area. When it is out of area it should be a default cursor (arrow).
To achieve that, put the "cursor: default" like this:

<zk>
	<style>
		.my-imagemap a {
			cursor: default;
		}
	</style>
	<imagemap id="imageEdm" src="5.jpg" sclass="my-imagemap">
		<area coords="0,0,100,100" tooltiptext="rectangle tooltips" shape="rectangle"></area>
		<area coords="200,200,100" tooltiptext="circle tooltips" shape="circle"></area>
	</imagemap>
</zk>

However the cursor is always in default style in IE9/10/11 with above customization (works for Chrome, FF).
It seems because the <image> tag is wrapped with the <a> tag, and the <a> tag has "cursor: default" style that affects the <area> style.