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

<areadata-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

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

Group multiple areas together

<areadata-group-id="group-1" href="#" shape="poly" coords="..." /><areadata-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;
}