ImageMapster Demo - snapshot with initial effects
HTML
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<img src="https://manager.groupe-bdl.com/web_content/modeles/baya-plan-maison-individuelle-plain-pied-3.jpg"
usemap="#usa" >
<map id="usa_image_map" name="usa">
<area href="#" state="CL" full="Couloir" coords="272,378,460,377,460,395,652,394,654,447,274,446" shape="poly">
<area href="#" state="SJ" full="Sejour" coords="274,640,35,639,35,215,310,213,315,370,269,372,271,380,271,447" shape="poly">
<area href="#" state="C1" full="Chambre 1" coords="278,453,478,453,480,643,277,642" shape="poly">
<area href="#" state="C2" full="Chambre 2" coords="485,453,650,452,654,645,483,644" shape="poly">
<area href="#" state="C3" full="Chambre 3" coords="463,214,465,389,651,387,650,217" shape="poly">
<area href="#" state="GA" full="Garage" coords="657,209,860,209,859,650,656,649" shape="poly">
</map>
JavaScript
var basic_opts = {
mapKey: 'state'
};
var initial_opts = $.extend({},basic_opts,
{
staticState: true,
fill: false,
stroke: true,
strokeWidth: 2,
strokeColor: 'ff0000'
});
$('img').mapster(initial_opts)
.mapster('set',true,'CA', {
fill: true,
fillColor: '00ff00'
})
.mapster('snapshot')
.mapster('rebind',basic_opts);