Image Mapping

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.3.1/jquery.maphilight.min.js"></script>
<img src="https://i.stack.imgur.com/ahS2A.jpg" class="map" alt="" usemap="#Map">
  <map name="Map" id="Map">
        <area class="block" shape="poly" coords="284,272,436,284,439,168,297,158,296,167,286,168,266,169,256,164,252,160,247,156,249,149,246,141,244,135,243,132,237,134,233,134,229,128,228,125,229,121,232,119,234,117,234,114,234,111,234,108,235,106,234,103,233,101,230,100,228,100,225,97,221,96,218,90,216,84,215,76,216,74,216,71,215,67,214,63,212,62,218,32,89,5,89,9,93,11,95,14,95,19,92,21,88,20,86,24,88,23,90,23,90,26,93,29,92,33,89,32,90,36,88,35,85,33,84,31,81,33,81,35,79,34,79,32,79,29,76,30,65,27,60,23,51,15,48,14,47,17,47,21,46,24,47,28,48,31,48,36,49,42,50,48,50,54,51,61,49,65,47,69,49,74,54,75,57,79,59,80,53,82,49,78,47,84,44,91,44,98,42,103,41,110,35,121,33,133,30,138,27,147,22,156,16,165,12,170,13,176,12,182,12,187,15,195,88,212,127,220,165,225,245,237,287,240" data-area="<h1>Square</h1>" />
        <area class="block" shape="poly" coords="443,51,438,225,555,226,561,228,562,232,566,232,573,230,578,230,580,230,583,232,587,232,592,235,596,236,594,231,595,228,593,225,591,225,594,222,595,219,592,215,593,213,658,209,703,206,705,210,707,215,704,219,707,222,708,227,711,229,715,230,717,231,776,225,776,216,772,206,771,200,774,186,774,176,778,165,778,161,782,154,782,144,778,152,770,163,766,170,766,160,770,157,771,150,772,148,770,144,767,143,763,143,766,140,766,138,767,135,766,132,758,132,758,128,753,126,750,127,747,128,737,124,726,123,718,122,713,114,707,111,702,114,696,112,700,109,701,105,692,107,686,109,681,111,675,111,695,90,700,85,707,79,719,72,712,68,704,67,698,66,693,68,688,68,683,71,676,69,672,67,665,66,661,62,653,60,644,60,640,61,637,59,634,57,630,56,627,57,622,54,621,50,615,50,613,54,609,50,566,51,540,53" data-area="<h1>Square</h1>" />
        <area class="block" shape="poly"...

CSS

body{
      overflow: hidden;
    }
    /* HOVER STYLES */
    div#pop-up {
      display: none;
      position: absolute;
      width: 280px;
      padding: 10px;
      background: #eeeeee;
      color: #000000;
      border: 1px solid #1a1a1a;
      font-size: 90%;
    }

JavaScript

$(function() {
        $('.map').maphilight({
          fill: true,
          fillColor: 'ffffff',
          fillOpacity: 0.7,
          stroke: true,
          strokeColor: 'ffffff',
          strokeOpacity: 1,
          strokeWidth: 2,
          fade: true,
          alwaysOn: false,
          neverOn: true,
          groupBy: false,
          wrapClass: true,
          shadow: true,
          shadowX: 2,
          shadowY: 2,
          shadowRadius: 5,
          shadowColor: '000000',
          shadowOpacity: 1,
          shadowPosition: 'inside',
          shadowFrom: false
        });
      
        var moveLeft = 20;
        var moveDown = 10;
        $('.block').hover(function(e) {
          $("div#pop-up").empty().append($(this).data("area")).show();
        }, function() {
          $('div#pop-up').hide();
        });
        $('.block').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);

          e.preventDefault();
          var data = {alwaysOn: false};
          $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
          var data1 = {alwaysOn: true};
          $('.block').not(this).data('maphilight', data1).trigger('alwaysOn.maphilight');

        });

        $('.block').mouseleave(function() {
          var data = {alwaysOn: false};
          $('.block').data('maphilight', data).trigger('alwaysOn.maphilight');
        });

      });