ImageMapster: Manual Resize 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="resize-img" alt="Gelderland Map" src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/Provincie_Gelderland.gif" usemap="#resize-map" />

  <map name="resize-map">
    <area href="#" shape="poly" coords="898,654,906,633,900,603,912,593,914,579,919,564,927,562,928,554,937,548,933,541,949,534,959,539,985,540,1000,544,999,550,993,555,997,562,999,574,1008,578,1013,579,1013,585,1020,592" data-alt="Aalten" data-title="Aalten" />
    <area href="#" shape="poly" coords="496,365,496,351,489,339,498,331,485,317,459,318,445,307,445,299,454,295,452,288,447,282,446,278,466,268,459,250,498,250,501,244,518,250,522,261,544,251,569,245,593,244,597,233,604,234,603,244,623,243,627,245,630,252,626,268,631,283,626,290,635,295,645,318,641,330,649,351,648,359,656,374,640,393,635,398,628,410,628,419,614,440,593,436,583,440,581,438,578,417,554,414,551,411,546,411,527,391,525,367,520,365" data-alt="Apeldoorn" data-title="Apeldoorn" />
    <area href="#" shape="poly" coords="491,511,496,494,516,467,523,461,530,466,550,466,550,452,558,452,576,438,583,442,576,452,571,467,574,501,585,520,604,536,585,544,583,562,572,553,569,562,562,562,558,567,558,569,553,581,546,579,534,572,525,568,509,568,508,553,512,540,529,546,532,539,529,534,527,518" data-alt="Arnhem" data-title="Arnhem" />
    <area href="#" shape="poly"...

CSS

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

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

  .resize-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .resize-any-height-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
  }

  .resize-controls input[type="button"] {
    padding: 0.1rem 0.4rem;
  }

  .resize-number-input {
    width: 80px;
  }

JavaScript

$(function() {
  var $image = $('#resize-img'),
    opts = {
      mapKey: 'data-title',
      stroke: true,
      strokeWidth: 2,
      strokeColor: 'ff0000'
    };
  $image.mapster(opts);

  $('#make-small').on('click', function() {
    $image.mapster('resize', 200, 0, 1000);
  });
  $('#make-big').on('click', function() {
    $image.mapster('resize', 720, 0, 1000);
  });
  $('#make-any').on('click', function() {
    $image.mapster('resize', $('#new-size').val(), 0, 1000);
  });
});