ImageMapster: Vegetable Tray Demo

Shows how to use different area options, and handling special events

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="vegetables-img" alt="Vegetable Tray" src="https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/vegetables.jpg" usemap="#vegetables-map" />
  <map name="vegetables-map">
    <area shape="poly" data-name="redpepper" coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290,367,296, 366,298,338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145" href="#" />
    <area shape="poly" data-name="celery" coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74, 300,64,285, 76,272, 98,249, 94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127" href="#" />
    <area shape="poly" data-name="carrots" coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70" href="#" />
    <area shape="poly" data-name="asparagus" coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42, 302,52, 272,61, 265,64, 270,73, 256,67, 248,60, 187,55, 192,58, 192,60, 184,64, 185,67, 176,67, 173,69, 142,67, 146,63, 135,59, 123,57, 142,44, 145,42, 143,39, 145,32, 207,38, 185,18, 212,19, 220,22" href="#" />
    <area shape="poly" data-name="squash"...

CSS

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

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

#selections-demo {
  border: 1px solid var(--im-border-color);
  margin-top: 1rem;
  padding: 1rem;
}

#selections-vegetable-details {
  display: none;
}

JavaScript

$(function() {
  // a cross reference of area names to text for each area's tooltip
  const xref = {
      carrots: '<b>Carrots</b> are delicious and may turn your skin orange!',
      asparagus: "<b>Asparagus</b> is one of the first vegetables of the spring. Being a dark green, it's great for you, and has interesting side effects.",
      squash: '<b>Squash</b> is a winter vegetable, and not eaten raw too much. Is that really squash?',
      redpepper: "<b>Red peppers</b> are actually the same as green peppers, they've just been left on the vine longer. Delicious when fire-roasted.",
      yellowpepper: 'Similar to red peppers, <b>yellow peppers</b> are sometimes sweeter.',
      celery: '<b>Celery</b> is a fascinating vegetable. Being mostly water, it actually takes your body more calories to process it than it provides.',
      cucumbers: '<b>Cucumbers</b> are cool.',
      broccoli: '<b>Broccoli</b> is like a forest of goodness in your mouth. And very good for you. Eat lots of broccoli!',
      dip: "Everything here is good for you but this one. <b>Don't be a dip!</b>"
    },
    defaultDipTooltip =
    "I know you want the dip. But it's loaded with saturated fat, just skip it and enjoy as many delicious, crisp vegetables as you can eat.",
    $image = $('#vegetables-img'),
    $selectionsDetails = $('#selections-vegetable-details'),
    $selectionsInstructions = $('#selections-instructions'),
    opts = {
      enableAutoResizeSupport: true,
      autoResize: true,
      fillOpacity: 0.4,
      fillColor: 'd42e16',
      strokeColor: '3320FF',
      strokeOpacity: 0.8,
      strokeWidth: 4,
      stroke: true,
      isSelectable: true,
      singleSelect: true,
      mapKey: 'data-name',
      listKey: 'data-name',
      onClick: function(data) {
        var newToolTip = defaultDipTooltip;
        if (data.selected) {
          $selectionsDetails.html(xref[data.key]);
          $selectionsInstructions.hide();
          $selectionsDetails.show();
        }...