ImageMapster: Shapes Demo

by Barry Schnell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.6.0/jquery.imagemapster.min.js"></script>
<div class="demo-container">
  <img id="shapes-img" alt="Shapes Hotspots" src="https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/shapes.jpg" usemap="#shapes-map" />
  <map name="shapes-map">
    <area shape="rect" data-group="rectangle" alt="" coords="378,39,463,116" />
    <area shape="poly" data-group="blue-circle" alt="" coords="286,34, 298,42, 308,54, 314,79, 307,103, 292,118, 270,125, 242,122, 227,112, 216,97, 212,73, 219,53, 227,43, 240,34, 264,29" href="#" />
    <!-- concentric circles for stroke highlighting -->
    <area shape="circle" data-group="inner-circle,inner-circle-mask" coords="101,81,36" href="#" />
    <area shape="circle" data-group="outer-circle-mask" coords="148,81,12" />
    <area shape="circle" data-group="outer-circle" coords="100,81,59" href="#" />
    <!-- End circles -->
  </map>

</div>

CSS

.demo-container {
  margin: 1rem;
  max-width: 500px;
  width: 100%;
  --im-border-color: black;
}

.demo-container img {
  display: block;
  width: 100%;
  height: auto;
}

JavaScript

$(function() {
  var $image = $('#shapes-img'),
    opts = {
      enableAutoResizeSupport: true,
      autoResize: true,
      noHrefIsMask: false,
      fillColor: '0a7a0a',
      fillOpacity: 0.7,
      mapKey: 'data-group',
      strokeWidth: 2,
      stroke: true,
      strokeColor: 'F88017',
      render_select: {
        fillColor: 'adadad'
      },
      areas: [{
          key: 'blue-circle',
          includeKeys: 'rectangle',
          stroke: false
        },
        {
          key: 'rectangle',
          stroke: true,
          strokeWidth: 3
        },
        {
          key: 'outer-circle',
          includeKeys: 'inner-circle-mask,outer-circle-mask',
          stroke: true
        },
        {
          key: 'outer-circle-mask',
          isMask: true,
          fillColorMask: 'ff002a'
        },
        {
          key: 'inner-circle-mask',
          fillColorMask: 'ffffff',
          isMask: true
        }
      ]
    };

  $image.mapster(opts);
});