ImageMapster: Frog 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="frog-img" alt="Frog Menu" src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/frog_map.jpg" usemap="#frog-map" />
  <map name="frog-map">
    <area shape="rect" data-name="menu1hot" coords="10,10,120,330" href="#" />
    <area shape="rect" data-name="menu1" coords="10,340,110,390" href="#" />
    <area shape="rect" data-name="menu2hot" coords="120,10,230,330" href="#" />
    <area shape="rect" data-name="menu2" coords="120,340,220,390" href="#" />
    <area shape="rect" data-name="menu3hot" coords="230,10,340,330" href="#" />
    <area shape="rect" data-name="menu3" coords="230,340,330,390" href="#" />
    <area shape="rect" data-name="menu4hot" coords="340,10,450,330" href="#" />
    <area shape="rect" data-name="menu4" coords="340,340,440,390" href="#" />
  </map>
</div>

CSS

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

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

JavaScript

$(function() {
  var $image = $('#frog-img'),
    opts = {
      enableAutoResizeSupport: true,
      autoResize: true,
      mapKey: 'data-name',
      singleSelect: true,
      altImage: 'https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/frog_map_alt.jpg',
      altImageOpacity: 0.8,
      fillOpacity: 0.5,
      fillColor: 'f4ff75',
      areas: [{
          key: 'menu1hot',
          staticState: false,
          includeKeys: 'menu1'
        },
        {
          key: 'menu2hot',
          staticState: false,
          includeKeys: 'menu2'
        },
        {
          key: 'menu3hot',
          staticState: false,
          includeKeys: 'menu3'
        },
        {
          key: 'menu4hot',
          staticState: false,
          includeKeys: 'menu4'
        }
      ]
    };

  $image.mapster(opts);
});