Mapify – image maps for html projects!
|Responsive and stylable image maps for html using jQuery, SVG and CSS3.
Image maps for html projects
Mapify plugin brings responsive and stylable image maps using jQuery, SVG and CSS3. Tested with Chrome, Firefox, Safari ( Desktop & Mobile ), internet explorer 10 & 11 using jQuery 1.8.1.
Built with:
– Grunt – The JavaScript Task Runner
– jQuery – A fast, small, and feature-rich JavaScript library
– Sass – Syntactically Awesome Style Sheets

Setup
Embed jquery.mapify.css and jquery.mapify.js in your page and call the plugin with the initializer.
Sample
$("img[usemap]").mapify();
Sample – Popovers
$("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" } });
Stylable with CSS! Sample:
.custom-popover{ background: #09f; } .mapify-hover{ fill:rgba(0,0,0,0.15); stroke: #fff; stroke-width: 2; } .custom-hover{ fill:rgba(0,0,0,0.15); stroke: #fff; stroke-width: 2; } .custom-hover-2{ fill: #09f; stroke: #fff; stroke-width: 2; }
Sample map – basic
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();
License: MIT
Homepage / docs / demo
Mapify – image maps
GitHub
https://github.com/etienne-martin/mapify
See also
Leaflet: open-source JavaScript library for mobile-friendly interactive maps
Github-like calendar heatmap – Cal-Heatmap
JavaScript SVG animation library – Vivus.js
SVG with JavaScript – svg.js and others
Enjoy awesome image maps!