HTML Image Maps Plugin With jQuery - ImageMapster

ImageMapster activates regions in HTML images so that you can highlight and select them. It contains lots of other features for manual control, tooltips, resizing, and more.

Features:

• Highlight and define areas.
• Create cool effects using an alternate photo.
• Link the image outline to an external menu.
• Show floating tooltips for areas or area groups.
• Use group and exclusion masks to create complex jobs.
• You can automatically resize image maps to any display size, even during activity.

The package can be installed via NPM:

npm install jquery imagemapster --save

Download the latest version of ImageMapster from the Releases page and include it on your webpage:

<!-- Optional: If targeting ES5 browers, as of ImageMapster v1.3.0, a Promise polyfill is required! -->
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
></script>
<script
  language="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script language="text/javascript" src="jquery.imagemapster.min.js"></script>

MapKeys can contain more than one value.

<img id="usamap" src="" usemap="#usa" />
<map name="usa">
  <area data-key="maine,new-england,really-cold" shape="poly" coords="..." />
  <area
    data-key="new-hampshire,new-england,really-cold"
    shape="poly"
    coords="..."
  />
  <area data-key="vermont,new-england,really-cold" shape="poly" coords="..." />
  <area data-key="connecticut,new-england" shape="poly" coords="..." />
  <area data-key="rhode-island,new-england" shape="poly" coords="..." />
  <area data-key="massachusetts,new-england" shape="poly" coords="..." />
  <!-- more states... -->
</map>

$('#usamap').mapster({ mapKey: 'data-key' });

Mousing over each state would cause just that state to be highlighted.

// select all New England states
$('img').mapster('set', true, 'new-england');
// select just Maine, New Hampshire & Vermont
$('img').mapster('set', true, 'really-cold');

HTML Image Maps Plugin, ImageMapster Github

See Demo And Download

Official Website(jamietre): Click Here

This superior jQuery/javascript plugin is developed by jamietre. For extra Advanced Usages, please go to the official website.