ImageMapster - Beatles Demo

Demonstrate using area groups

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="beatles-img" alt="Beatles Menu" src="https://raw.githubusercontent.com/jamietre/ImageMapster/master/examples/images/beatles_basic.jpg" usemap="#beatles-map" />

  <map name="beatles-map">
    <area shape="rect" data-name="paul,all" coords="36,46,121,131" href="#" />
    <area shape="rect" data-name="ringo,all" coords="113,76,198,161" href="#" />
    <area shape="rect" data-name="john,all" coords="192,50,277,135" href="#" />
    <area shape="rect" data-name="george,all" coords="262,60,347,145" href="#" />
  </map>

  <div id="beatles-caption">
    <div id="beatles-caption-band-member">
      <div id="beatles-caption-header"></div>
      <div id="beatles-caption-text"></div>
    </div>
    <span id="beatles-caption-instructions">
      Hover over a band member to learn more about them!
    </span>
  </div>
</div>

CSS

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

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

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

#beatles-caption-band-member {
  display: none;
}

#beatles-caption-band-member>div:not(:first-child) {
  margin-top: 1rem;
}

JavaScript

$(function() {
  // Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border
  // 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border
  // 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks
  // onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or
  // remove the captions, and also set a flag to let the other code know if we're currently in an area.
  var inArea = false,
    $image = $('#beatles-img'),
    $captionBandMember = $('#beatles-caption-band-member'),
    $captionInstructions = $('#beatles-caption-instructions'),
    $captionHeader = $('#beatles-caption-header'),
    $captionText = $('#beatles-caption-text'),
    captions = {
      paul: [
        'Paul McCartney - Bass Guitar and Vocals',
        "Paul McCartney's song, Yesterday, recently voted the most popular song " +
        'of the century by a BBC poll, was initially composed without lyrics. ' +
        "Paul used the working title 'scrambled eggs' before coming up with the final words."
      ],
      ringo: [
        'Ringo Starr - Drums',
        "Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, " +
        "when she wouldn't come out and play with Mia and the Beatles at a religious retreat " +
        'in India.'
      ],
      john: [
        'John Lennon - Guitar and Vocals',
        "In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool " +
        'contest principally because they called in posing as different people and voted ' +
        'for themselves numerous times.'
      ],
      george: [
        'George Harrison - Lead Guitar and Vocals',
        "The Beatles' last public concert was held in San Francisco's Candlestick " +
        'Park on August 29, 1966.'
      ]
    },
    single_opts = {
      fillColor: '000000',
  ...