Mapify.js

Responsive and stylable image maps using jQuery, SVG and CSS3

View on gitHub Download (6KB)

Tested with Chrome, Firefox, Safari ( Desktop & Mobile ), internet explorer 10 & 11 using jQuery 1.8.1

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();
Saint-Louis Saint-Marcel-de-Richelieu Saint-Hugues Sainte-Hélène-de-Bagot Saint-Bernard-de-Michaudville Saint-Jude Saint-Barnabé-Sud Saint-Simon Saint-Liboire La Présentation Saint-Hyacinthe Saint-Dominique Saint-Valérien-de-Milton Sainte-Marie-Madeleine Sainte-Madeleine Saint-Damase Saint-Pie

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"
	}
});
Saint-Louis Saint-Marcel-de-Richelieu Saint-Hugues Sainte-Hélène-de-Bagot Saint-Bernard-de-Michaudville Saint-Jude Saint-Barnabé-Sud Saint-Simon Saint-Liboire La Présentation Saint-Hyacinthe Saint-Dominique Saint-Valérien-de-Milton Sainte-Marie-Madeleine Sainte-Madeleine Saint-Damase Saint-Pie