Highlight Image Areas On Hover - jQuery Mapoid

Mapoid is a powerful jQuery plugin used for highlighting image areas inside an image map on hover and firing functions when specific JavaScript events are triggered.

Supported JavaScript events:

• click
• dblclick
• mousedown
• mouseup
• mouseover
• mouseout
• mousemove
• mouseenter
• mouseleave
• hoverIn
• hoverOut
• select
• deselect

How to use it:

1. Create the image map containing seveal image areas on your image as follows:

<img alt="img" data-bg_fill="rgba(244,124,67,0.5)" class="demo" src="map.jpg" width="320" height="160" usemap="#demo" style="display: block;">

<map name="demo">
<area class="harea tooltip" data-id="269" alt="Banskobystrický kraj" title="Banskobystrický kraj" data-img="" href="search?region=3089" data-ref="" shape="poly" coords="273,288,278,292,281,288,284,291,288,289,290,291,300,291,301,294,305,289,307,289,309,287,321,286,321,288,327,285,330,288,333,284,334,276,336,274,335,270,339,268,338,265,342,265,352,256,354,259,357,259,357,264,363,266,366,263,374,268,371,272,372,275,374,272,376,272,377,273,379,272,387,274,385,280,389,280,390,276,394,276,394,272,403,272,404,274,407,271,407,268,414,262,415,257,424,258,424,255,427,255,427,252,431,253,434,256,437,254,439,254,440,250,445,245,444,240,450,237,449,233,451,230,450,226,458,219,457,216,451,216,449,218,446,216,444,216,442,217,437,216,437,212,436,206,440,197,441,192,434,190,435,179,428,171,421,168,421,160,424,159,424,154,426,150,428,146,428,143,433,139,430,137,427,137,424,134,420,138,416,138,409,136,404,134,399,133,396,131,394,133,373,132,369,134,364,133,357,133,352,127,324,128,315,136,314,139,313,141,305,142,305,140,307,138,307,135,305,132,303,132,300,135,295,135,291,137,285,138,281,135,279,136,275,141,274,147,276,152,274,162,270,162,262,161,260,156,251,161,247,171,242,174,239,183,235,182,231,180,226,186,223,190,224,193,215,193,207,198,207,201,211,201,208,205,214,205,214,210,216,212,211,217,218,221,219,224,218,232,213,237,214,240,218,236,230,236,239,224,242,225,245,229,248,230,248,235,250,236,250,240,254,241,253,245,251,246,251,250,248,252,247,257,250,263,246,266,252,268,255,272,265,271,274,266,277,265,279,264,279,268,277,268,277,272,278,271,279,278,274,281,274,284"><area class="harea tooltip" data-id="266" alt="Bratislavský kraj" title="Bratislavský kraj" data-img="" href="search?region=3090" data-ref="" shape="poly" coords="3,207,10,199,13,194,19,190,23,187,28,188,28,185,33,189,45,189,51,188,53,184,57,184,57,181,65,172,68,173,71,178,70,180,67,183,64,183,63,187,57,191,67,200,65,203,60,204,61,208,63,210,71,211,70,216,75,218,76,226,80,226,80,232,77,236,84,242,83,246,80,248,80,252,86,255,84,258,86,261,85,264,78,268,71,268,71,265,68,264,67,271,62,271,58,272,58,275,60,277,63,279,57,283,50,289,41,289,39,292,32,286,29,288,26,287,30,285,28,277,31,275,28,270,28,266,23,266,17,261,15,249,12,247,15,244,14,241,10,241,7,234,9,230,5,226,1,226,2,218,4,213"><area class="harea tooltip" data-id="270" alt="Košický kraj" title="Košický kraj" data-img="" href="search?region=3086" data-ref="" shape="poly" coords="458,217,462,213,462,204,465,205,468,203,472,205,481,200,486,199,489,197,499,198,503,195,508,201,514,199,519,207,525,206,535,208,536,213,540,213,542,209,544,208,548,207,552,204,556,205,560,208,564,205,564,199,577,200,577,195,588,201,589,206,592,210,600,209,602,218,607,226,607,232,611,232,614,237,618,240,621,242,626,241,628,242,629,235,631,236,632,238,635,237,636,235,641,236,643,233,650,233,653,231,656,233,659,231,661,234,666,232,668,229,667,225,667,213,669,208,668,197,672,191,676,186,679,187,680,181,689,176,692,174,691,168,694,166,694,164,692,161,692,159,698,153,696,149,696,141,685,140,681,142,680,140,678,136,677,131,674,129,664,138,664,144,649,143,642,144,638,139,636,137,630,137,626,135,623,135,622,139,621,142,621,146,623,153,618,155,618,158,614,158,612,161,607,160,606,158,595,157,591,156,590,154,589,150,584,146,584,144,576,137,574,139,570,140,570,143,572,145,568,146,563,148,558,150,556,151,555,150,554,145,557,143,557,141,550,141,547,140,546,137,544,137,541,136,527,134,525,131,521,126,516,127,510,123,504,123,503,121,500,121,495,117,494,121,492,123,489,122,482,124,479,125,474,124,472,119,469,119,463,116,463,113,459,116,459,121,457,119,452,117,451,119,448,120,443,121,438,124,437,128,440,127,441,129,441,132,438,133,435,138,432,140,429,143,428,145,424,150,424,154,423,159,421,161,421,167,429,173,435,178,435,190,438,190,441,192,441,196,439,201,436,206,436,211,438,216,443,218,448,216,449,219,451,216,455,217"><area class="harea tooltip" data-id="268" alt="Nitriansky kraj" title="Nitriansky kraj" data-img="" href="search?region=3091" data-ref="" shape="poly" coords="103,339,107,344,112,343,113,346,127,345,129,347,132,346,136,345,139,343,142,346,144,346,147,344,160,346,165,348,174,348,179,350,186,349,192,347,197,347,200,344,203,345,205,347,209,347,213,344,217,344,220,346,225,347,227,345,232,344,236,341,236,336,239,335,245,335,247,336,251,336,252,334,248,333,248,329,240,325,240,315,242,314,242,308,240,307,240,305,247,304,248,302,248,294,251,292,265,291,268,293,273,288,274,284,277,279,278,268,279,268,278,264,273,266,270,269,261,271,255,271,251,268,247,269,247,267,250,262,247,256,248,252,251,250,252,246,254,245,253,241,250,239,250,236,249,235,248,230,245,229,244,227,241,224,238,223,234,227,230,235,218,236,216,239,215,240,213,239,213,236,218,232,218,222,212,219,211,217,216,212,215,210,214,209,215,205,208,205,210,203,209,200,207,198,197,202,197,205,195,206,194,204,192,207,187,207,187,201,181,195,178,195,177,190,180,185,179,182,175,182,168,176,168,171,164,168,158,168,152,164,149,168,149,174,152,180,152,182,145,183,146,186,135,186,131,194,130,199,142,211,142,213,134,221,133,226,129,230,128,234,127,239,125,241,130,245,128,247,125,250,127,253,130,254,131,259,128,262,124,261,120,261,122,266,119,268,117,266,114,269,122,276,121,280,120,283,121,285,125,282,124,287,126,289,129,288,129,295,128,301,128,309,126,312,128,313,121,320,118,321,116,324,116,330,112,331,108,332,107,337,106,338"><area class="harea tooltip" data-id="271" alt="Prešovský kraj" title="Prešovský kraj" data-img="" href="search?region=3087" data-ref="" shape="poly" coords="384,79,387,85,387,93,392,93,393,96,398,97,404,95,405,96,402,103,402,114,396,114,398,117,403,127,408,128,407,131,400,132,401,134,407,135,411,137,420,138,423,135,426,137,434,139,438,132,441,132,441,129,437,127,437,124,450,119,452,116,457,120,459,122,460,115,463,113,464,117,468,119,473,121,476,124,481,125,487,123,492,123,495,120,494,116,497,116,499,120,505,121,511,123,516,126,521,126,527,134,532,135,541,136,547,138,548,140,556,141,557,144,554,145,555,150,559,150,572,145,570,142,571,139,575,140,576,138,584,145,584,148,590,150,591,156,606,158,609,160,612,160,615,158,618,158,618,155,623,154,622,150,622,147,621,140,623,134,627,136,636,138,643,143,646,144,649,143,664,143,664,137,672,130,674,130,677,132,677,135,680,137,680,142,686,140,696,140,700,137,701,131,701,127,707,120,707,116,711,115,715,115,715,110,716,109,716,101,717,100,717,98,711,97,710,99,707,98,704,96,700,97,694,90,693,88,688,88,687,91,679,88,676,86,677,82,675,80,672,82,665,80,665,78,655,76,651,74,651,72,652,67,651,62,646,57,643,51,635,50,632,46,629,46,628,43,625,42,623,45,622,45,621,49,619,47,618,44,614,41,613,39,609,38,607,39,602,33,599,33,597,35,594,34,589,35,587,38,584,37,582,38,577,39,572,35,569,34,566,32,561,32,558,30,555,34,552,35,551,39,547,41,540,35,537,37,533,36,530,38,536,46,534,50,528,49,522,55,522,59,518,59,515,62,512,57,507,52,504,54,499,52,498,48,495,46,493,42,492,38,488,38,484,39,481,41,477,39,474,44,471,45,468,45,461,39,454,39,453,42,449,44,447,41,440,42,441,51,438,53,436,51,426,51,422,55,421,57,417,58,416,64,412,68,413,76,411,77,411,83,405,79,402,79,401,74,399,73,389,72,388,75,387,77"><area class="harea tooltip" data-id="265" alt="Trenčiansky kraj" title="Trenčiansky kraj" data-img="" href="search?region=3092" data-ref="" shape="poly" coords="75,141,83,136,90,141,95,141,105,135,115,134,124,123,136,122,142,104,156,106,163,100,166,95,166,85,169,80,168,74,173,71,171,62,176,60,177,55,186,55,194,52,200,51,210,71,210,76,216,78,224,85,225,92,221,95,226,98,226,109,222,113,218,114,209,120,209,123,212,124,217,124,222,119,225,121,233,120,237,123,239,122,239,125,237,128,237,140,245,149,252,161,248,170,242,175,239,183,231,180,229,184,224,189,224,193,210,194,208,198,203,200,197,203,197,205,193,204,192,207,187,208,186,201,180,194,178,195,177,190,180,186,179,182,176,182,169,176,167,171,164,168,159,168,151,165,150,168,149,174,152,180,151,183,145,182,143,181,139,180,134,177,129,177,129,176,128,175,119,176,114,171,107,172,101,172,100,176,94,176,91,178,85,173,85,171,81,164,80,161,84,158,84,154,79,152,75,152,72,149,69,147,74,145"><area class="harea tooltip" data-id="267" alt="Trnavský kraj" title="Trnavský kraj" data-img="" href="search?region=3093" data-ref="" shape="poly" coords="17,191,15,186,15,178,20,174,20,166,32,147,37,145,39,140,39,137,45,135,51,129,61,132,71,141,76,140,70,147,76,152,81,151,84,155,84,158,80,161,80,165,85,170,85,172,91,178,94,176,100,176,101,172,108,172,113,170,120,176,129,176,129,178,134,178,137,179,146,183,145,186,135,186,131,192,132,196,129,199,143,210,142,212,139,214,135,220,134,226,129,231,127,239,125,241,125,243,129,244,129,247,125,250,126,252,128,254,131,255,131,259,129,261,126,262,124,261,120,261,122,265,122,267,119,267,116,266,113,269,117,271,122,276,122,279,120,282,121,284,123,284,126,283,125,286,125,288,129,288,129,295,128,296,128,310,127,311,128,314,122,320,118,321,116,324,116,330,113,332,107,332,107,338,103,339,96,334,94,330,90,329,89,331,86,327,84,322,79,321,74,316,71,308,66,303,60,296,52,295,50,293,49,289,53,286,56,286,56,283,60,282,61,278,59,274,58,272,67,271,67,265,69,264,72,265,71,269,77,268,86,263,85,258,86,255,80,252,80,248,84,245,84,241,77,236,81,231,80,227,77,226,75,223,75,218,71,217,70,211,64,210,60,207,60,204,65,203,68,200,57,191,64,186,64,183,68,183,71,179,69,174,65,173,61,176,58,181,57,184,54,184,53,186,50,188,45,188,43,189,35,189,32,188,28,185,27,188,22,188,19,190"><area class="harea tooltip" data-id="1" alt="Žilinský kraj" title="Žilinský kraj" data-img="" href="search?region=3088" data-ref="" shape="poly" coords="198,50,207,63,209,69,209,73,212,78,215,77,219,82,222,82,222,85,223,85,223,88,224,88,224,92,220,95,226,98,226,99,227,107,223,113,219,114,214,116,208,120,208,123,211,124,216,124,223,118,224,121,233,120,236,123,240,123,236,129,236,131,238,132,237,136,236,136,236,139,245,148,245,151,252,161,259,156,260,157,260,160,269,161,271,162,274,163,274,157,275,155,276,151,273,145,275,141,279,136,282,136,285,138,288,137,298,135,303,132,305,132,306,135,308,137,305,141,313,141,315,139,315,136,323,128,326,128,351,127,358,133,365,133,367,135,370,135,373,132,381,132,382,134,394,133,394,131,397,131,398,133,402,132,408,131,408,128,404,128,401,120,399,117,396,114,401,113,401,107,402,102,405,97,404,94,400,96,396,97,394,95,393,92,388,92,387,85,383,79,379,79,376,77,374,78,370,76,372,71,378,64,374,59,377,55,376,46,375,39,371,37,367,42,361,39,356,38,357,34,356,29,353,31,349,29,345,18,343,17,344,8,337,4,337,0,333,0,333,3,329,4,328,7,324,7,324,14,311,14,308,18,307,22,305,25,307,28,305,29,301,30,301,36,290,38,289,36,284,36,283,40,275,39,273,36,276,34,273,26,273,21,275,19,274,18,271,17,254,16,248,20,247,20,244,18,234,17,232,19,230,19,229,16,224,16,220,20,221,24,217,28,212,36,208,37,205,36,203,37,206,42,203,46"></map>

2. Insert jQuery library and the jQuery Mapoid plugin right before the </body> tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="mapoid.js"></script>

3. Call the function on the image map and done.

$("map[name=demo]").mapoid();

4. Possible options to customize the plugin.

$("map[name=demo]").mapoid({

  // width
  width : 600,

  // stroke color
  strokeColor: 'black',

  // stroke width
  strokeWidth: 1,

  // fill color
  fillColor: 'black',

  // 0-1
  fillOpacity: 0.5,

  // in milliseconds
  fadeTime: 500,

  // an array of selected areas
  selectedArea: false,

  // select on click
  selectOnClick: true
  
});

5. Available event handlers.

$("map[name=demo]").mapoid({

  click: function(){},
  dblclick: function(){},
  mousedown: function(){},
  mouseup: function(){},
  mouseover: function(){},
  mouseout: function(){},
  mousemove: function(){},
  mouseenter: function(){},
  mouseleave: function(){},
  hoverIn: function(){},
  hoverOut: function(){},
  select: function(){},
  deselect: function(){}

});

---

This awesome jQuery plugin is developed by miso25. For more Advanced Usages, please check the demo page or visit the official website.