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
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();
$("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" } });