Mapify.js

Basic example

Step 1: Add your image to the body (Can be SVG, PNG or JPG). Make sure you specify the width, height and usemap attribute for your image. The specified width and height must match the native size of the image.

<img src="map.svg" width="578px" height="716px" border="0" usemap="#Map" />

Step 2: Add your map to the body (After your image). You need to set the name attribute of your map with the same value as the id. Mapify works only when the shape attribute is set to poly.

<map name="Map" id="Map">
	<area href="#" shape="poly" coords="92.394,40.738,
	218.265,178.666,228.589,153.08,225.747,144.878,241.33,128.802,210.934,99.067,211.084,95.177,214.824,86.499,215.273,79.616,
	220.809,70.04,194.924,60.165,196.72,53.881,172.331,48.494,173.229,44.903,150.637,40.738,147.195,52.534,133.878,39.068,
	137.32,28.445,122.657,13.483,92.394,40.738" />
</map>

Step 3: Embed jQuery, the Mapify script and call the plugin like this.

$("img[usemap]").mapify();

With popover

$("img[usemap]").mapify({
	popOver: {
		content: function(zone){ 
			return "<strong>"+zone.attr("data-title")+"</strong>"+zone.attr("data-nbmembre")+" Members";
		},
		delay: 0.7,
		margin: "15px",
		height: "130px",
		width: "260px"
	}
});