Mapify – image maps for html projects!

DirectCode | February 13, 2020 | Awesome, CSS, Data, es6, JavaScript, jQuery | No Comments

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

Mapify - image maps — Mapify – image maps

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.