/Mapify

Responsive and stylable image maps using jQuery, SVG and CSS3

Primary LanguageJavaScriptOtherNOASSERTION

Mapify plugin

Responsive and stylable image maps using jQuery, SVG and CSS3

Project website: http://etiennemartin.ca/mapify/

Basic usage

Embed jquery.mapify.css and jquery.mapify.js in your page and call the plugin with the following function:

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

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

Custom class for a specific popOver

<area data-pop-over-class="custom-popover" href="#" shape="poly" coords="..." />

Hover effects

Custom hover class for all areas

$("img[usemap]").mapify({
	hoverClass: "custom-hover"
});

Custom hover class for a specific area

<area data-hover-class="custom-hover-2" href="#" shape="poly" coords="..." />

Group multiple areas together

<area data-group-id="group-1" href="#" shape="poly" coords="..." />
<area data-group-id="group-1" href="#" shape="poly" coords="..." />

Stylable with css

.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;
}