### onGetList callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback during initialization to dynamically provide a boundList. Expects a jQueryObject containing corresponding HTML elements. The example builds list items and returns input elements.

```javascript
$('#myimage').mapster({
  onGetList: function (data) {
    var $me = $(this), // HTMLImageElement of the bound image,
      items = data, // array of AreaData objects
      listItems = items.map(function (item) {
        return buildListItem(item.key, item.value);
      });


    // return only the input elements
    return $('#my-list').empty().append(listItems).find('input');
  }
});
```

--------------------------------

### Install Zepto-compatible ImageMapster via NPM

Source: https://jamietre.github.io/ImageMapster/overview/getting-started

Install the zepto-modules wrapper and ImageMapster v1.8.0 (the latest Zepto-compatible version) via NPM. Use --save to add them to your package.json.

```bash
npm install zepto-modules imagemapster@1.8.0 --save

```

--------------------------------

### selected option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the area with key 'TX' to be initially selected.

```javascript
$('#myimage').mapster({
  areas: [
    // area TX is initially selected
    { key: 'TX', selected: true }
  ]
});
```

--------------------------------

### strokeWidth option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the stroke width. The example sets strokeWidth to 3.

```javascript
$('#myimage').mapster({
  strokeWidth: 3
});
```

--------------------------------

### render_select option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets rendering options to override defaults when an area is selected. The example shows overriding strokeWidth and fillColor for the selected state.

```javascript
$('#myimage').mapster({
  // apply defaults
  strokeWidth: 5,
  fillColor: 'FFFFFF',
  render_select: {
    // override for select
    strokeWidth: 2,
    fillColor: '00FF00'
  }
});
```

--------------------------------

### render_highlight option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets rendering options to override defaults when an area is highlighted. The example shows overriding strokeWidth and fillColor for the highlighted state.

```javascript
$('#myimage').mapster({
  // apply defaults
  strokeWidth: 5,
  fillColor: 'FFFFFF',
  render_highlight: {
    // override for highlight
    strokeWidth: 2,
    fillColor: '00FF00'
  }
});
```

--------------------------------

### strokeOpacity option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the stroke opacity as a number from 0 to 1. The example sets strokeOpacity to 0.5.

```javascript
$('#myimage').mapster({
  strokeOpacity: 0.5
});
```

--------------------------------

### keys method: retrieve primary and all keys for areas and key groups

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Use the 'keys' method to get the primary mapKey or a comma-separated list of all keys/groups for an area or key group. The 'all' parameter (default false) returns all keys instead of just primary keys. Examples show usage with an area selector and an image selector, with and without the 'all' flag.

```javascript
// returns primary key for area
$('#somearea').mapster('keys');
// returns comma-separated list of all keys/groups associated to area
$('#somearea').mapster('keys', true);
// returns comma-separated list of all area primary keys associated to key of TX
$('#someimage').mapster('keys', 'TX');
// returns comma-separated list of all keys/groups associated to key of TX
$('#someimage').mapster('keys', 'TX', true);
```

--------------------------------

### onConfigured callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when mapster has finished initialization. Success is always true because ImageMapster throws an error on failure or when configTimeout is exceeded.

```javascript
$('#myimage').mapster({
  onConfigured: function (success) {
    var $me = $(this); // HTMLImageElement of the bound image


    // success will always be true because ImageMapster will
    // throw an error if configuration fails and/or
    // configTimeout is exceeded
  }
});
```

--------------------------------

### Install ImageMapster with jQuery via NPM

Source: https://jamietre.github.io/ImageMapster/overview/getting-started

Install the jQuery version of ImageMapster and jQuery via NPM. Use the --save flag to add them to your package.json dependencies.

```bash
npm install jquery imagemapster --save

```

--------------------------------

### stroke option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Enables outlining of areas when highlighted or selected. The example sets stroke to true.

```javascript
$('#myimage').mapster({
  stroke: true
});
```

--------------------------------

### set method usage examples

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Examples of using the mapster 'set' method to toggle, select, or deselect areas, with optional rendering overrides and key-based selection. The selected parameter toggles state if not true or false.

```javascript
// toggle the area
$('#somearea').mapster('set');
// select the area
$('#somearea').mapster('set', true);
// deselect the area
$('#somearea').mapster('set', false);
// toggle the area and apply rendering overrides
$('#somearea').mapster('set', null, { fillColor: '00FF00' });
// toggle the area with key 'TX'
$('#someimage').mapster('set', null, 'TX');
// select the area with key 'TX'
$('#someimage').mapster('set', true, 'TX');
// deselect the area with key 'TX'
$('#someimage').mapster('set', false, 'TX');
// toggle the area with key `TX` and apply rendering overrides
$('#someimage').mapster('set', null, 'TX', { fillColor: '00FF00' });
```

--------------------------------

### resize method examples

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Shows how to call mapster('resize') with various argument combinations: width only, height only, and with animation duration and callback. The width or height is used to calculate the other dimension based on the original aspect ratio.

```javascript
// set width to 500 (height will be autocalculated
// based on aspect ratio)
$('#someimage').mapster('resize', 500);
// set height to 500 (width will be autocalculated
// based on aspect ratio)
$('#someimage').mapster('resize', null, 500);
// set width to 500 (height will be autocalculated
// based on aspect ratio) using an animiation duration
// of 1000 and invoking the callback once complete
$('#someimage').mapster('resize', 500, null, 1000, function () {
  $('#log').append('resize complete');
});
// set height to 500 (width will be autocalculated
// based on aspect ratio) using an animiation duration
// of 1000 and invoking the callback once complete
$('#someimage').mapster('resize', null, 500, 1000, function () {
  $('#log').append('resize complete');
});
```

--------------------------------

### staticState option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the area with key 'TX' to be always selected using staticState.

```javascript
$('#myimage').mapster({
  areas: [
    // area TX is always selected
    { key: 'TX', staticState: true }
  ]
});
```

--------------------------------

### onAutoResize callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback after the image map has been automatically resized. Requires enableAutoResizeSupport and autoResize options.

```javascript
$('#myimage').mapster({
  enableAutoResizeSupport: true,
  autoResize: true,
  onAutoResize: function () {
    // ...
  }
});
```

--------------------------------

### altImages: Define alternate images for highlight/select

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Shows how to define alternate images via the altImages option and reference them by key in altImage. The first example sets a default altImage for all areas; the second shows per-area overrides using render_select and render_highlight.

```javascript
// by default, all areas will use img3 for highlight/select
$('#myimage').mapster({
  altImages: {
    img3: '../examples/images/usa_map_720_alt_3.jpg'
  },
  altImage: 'img3'
});
```

```javascript
// by default, areas will not use an altImage for highlight/select
$('#myimage').mapster({
  altImages: {
    img2: '../examples/images/usa_map_720_alt_2.jpg',
    img3: '../examples/images/usa_map_720_alt_3.jpg'
  },
  areas: [
    {
      // TX will use img3 for highlight/select
      key: `TX`,
      altImage: 'img3'
    },
    {
      // KS will use img2 for select
      // and img3 for highlight
      key: 'KS',
      render_select: {
        altImage: 'img2'
      },
      render_highlight: {
        altImage: 'img3'
      }
    },
    {
      // CO will use usa_map_720_alt_4.jpg for highlight/select
      key: 'CO',
      altImage: '../examples/images/usa_map_720_alt_4.jpg'
    }
  ]
});
```

--------------------------------

### onStateChange callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when an area changes state, either highlight or select. The data object provides the mapKey, the new state ('highlight' or 'select'), and the selection state.

```javascript
$('#myimage').mapster({
  onStateChange: function (data) {
    var $me = $(this), // HTMLImageElement of the bound image
      key = data.key, // mapKey for this area
      state = data.state; // "highlight" | "select",
    selected = data.selected; // true or false based on current area state
  }
});
```

--------------------------------

### Bind a specific image with options

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Target a specific image by id and define options for how areas appear when highlighted. The example sets fillColor to 'ff0000' and fillOpacity to 0.3.

```javascript
$('#myimage').mapster({
  fillColor: 'ff0000',
  fillOpacity: 0.3
});
```

--------------------------------

### onGetList data structure example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Structure of the data parameter passed to onGetList callback. Contains key, value, options, and areas function for each area or group.

```javascript
var data = {
  key: `string`, // primary mapKey for this area or area group
  value: `string`, // mapValue for this area or group
  options: `object`, // area specific options defined for this group
  areas: `function()` // function that will return an array of MapArea objects that make up this group
};
```

--------------------------------

### get

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Gets keys for all selected areas for the first element in the set of matched elements. When called on a bound image with no key parameter, returns a comma-separated list of keys representing the areas currently selected. If key is specified or if called on a bound area, returns true or false indicating whether the area specified is selected.

```APIDOC
## get

### Description
Get keys for all selected areas for the first element in the set of matched elements. When called on a bound image with no `key` parameter included, returns a comma-separated list of keys representing the areas currently selected. If `key` is specified or if called on a bound area, returns `true` or `false` indicating whether the area specified is selected.

### Usage
- `$('area').mapster('get');`
- `$('img').mapster('get', [key]);`

### Parameters
#### Optional Parameters
- **key** (string) - Optional - A single value identifying an area or area group corresponding to a value in mapKey. Default: `undefined`.

### Examples
```javascript
// returns true/false for selected status of area
$('#somearea').mapster('get');
// returns comma-separated list of keys for currently selected areas
$('#someimage').mapster('get');
// returns true/false for area with key of TX
$('#someimage').mapster('get', 'TX');
```
```

--------------------------------

### highlight option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets highlight to false for the entire map, but allows highlighting for the area with key 'TX'.

```javascript
$('#myimage').mapster({
  highlight: false,
  areas: [
    // area TX allows highlight
    { key: 'TX', highlight: true }
  ]
});
```

--------------------------------

### onHideToolTip callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when a tooltip is closed.

```javascript
$('#myimage').mapster({
  onHideToolTip: function () {
    // ...
  }
});
```

--------------------------------

### strokeColor option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the stroke color using a hex code without the hash. The example sets strokeColor to '00FF00'.

```javascript
$('#myimage').mapster({
  strokeColor: '00FF00'
});
```

--------------------------------

### get_options: Get current or effective options

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Returns the options used to configure the map when called with no parameters, or area-specific options when a key is provided. The effective parameter (default false) determines whether inherited options are included.

```javascript
// returns configured options specific to area
$('#somearea').mapster('get_options');
// returns all current effective options for area
$('#somearea').mapster('get_options', true);
// returns configured options for image
$('#someimage').mapster('get_options');
// returns configured options for area with key of TX
$('#someimage').mapster('get_options', 'TX');
// returns all current effective options for area with key of TX
$('#someimage').mapster('get_options', 'TX', true);
```

--------------------------------

### listKey option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the attribute name used to match list items to map areas. Default is 'value'.

```javascript
$('#myimage').mapster({
  listKey: 'data-state'
});
```

--------------------------------

### onClick callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when a hotspot area is clicked. Provides data with event, list target, key, and selected state. Return false to cancel default select action, or true to navigate to href.

```javascript
$('#myimage').mapster({
  onClick: function (data) {
    var $me = $(this), // HTMLAreaElement element clicked
      e = data.e, // jQueryEventObject - see https://api.jquery.com/category/events/event-object/
      item = data.list_target, // JQueryObject from boundList (if applicable)
      key = data.key, // mapKey for this area
      selected = data.selected; // true or false based on current area state


    // ...
  }
});
```

--------------------------------

### singleSelect option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Enables singleSelect to allow only one area to be selected at a time.

```javascript
$('#myimage').mapster({
  // only allow one area to be selected at a time
  singleSelect: true
});
```

--------------------------------

### select method example

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Selects an area using mapster('select'). This forces the area to become selected regardless of its current state or configuration options, and does not fire a click event.

```javascript
// select area
$('#somearea').mapster('select');
```

--------------------------------

### HTML map with multiple mapKey values

Source: https://jamietre.github.io/ImageMapster/overview/getting-started

Example HTML showing areas with data-key attributes containing multiple values. The first value defines groups on mouseover; other values can create logical groups.

```html
<img id="usamap" src="map.jpeg" 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>
```

--------------------------------

### snapshot method usage example

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Takes a snapshot of the current selection state and resets ImageMapster, making active selections appear as part of the image and no longer managed by ImageMapster.

```javascript
$('#someimage').mapster('snapshot');
```

--------------------------------

### onMouseover callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when the mouse pointer enters a bound area. The data object provides the event, area-specific options, mapKey, and selection state.

```javascript
$('#myimage').mapster({
  onMouseover: function (data) {
    var $me = $(this), // HTMLAreaElement element clicked
      e = data.e, // jQueryEventObject - see https://api.jquery.com/category/events/event-object/
      options = data.options, // area specific options defined for this area/area group
      key = data.key, // mapKey for this area
      selected = data.selected; // true or false based on current area state


    // ...
  }
});
```

--------------------------------

### Activate all image maps with default options

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Add this script to your page after installing ImageMapster to activate all image maps with default options.

```html
<script>
  $(function () {
    $('img[usemap]').mapster();
  });
</script>
```

--------------------------------

### sortList option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sorts the data passed to onGetList by mapValue. Use 'desc' for descending order.

```javascript
$('#myimage').mapster({
  sortList: 'desc'
});
```

--------------------------------

### Use ImageMapster with Zepto in your module

Source: https://jamietre.github.io/ImageMapster/overview/getting-started

Import your custom Zepto build and the Zepto version of ImageMapster, then call .mapster() on your image. This example shows the basic usage with a placeholder config.

```javascript
import $ from './yourzepto.js';
import im from 'imagemapster/dist/jquery.imagemapster.zepto.js';


$(yourImage).mapster({
  // your config here
});

```

--------------------------------

### get: Get selected keys or selection status

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Returns a comma-separated list of keys for selected areas when called on a bound image without a key, or true/false for a specified area or key. The key parameter identifies an area or group corresponding to a value in mapKey.

```javascript
// returns true/false for selected status of area
$('#somearea').mapster('get');
// returns comma-separated list of keys for currently selected areas
$('#someimage').mapster('get');
// returns true/false for area with key of TX
$('#someimage').mapster('get', 'TX');
```

--------------------------------

### onShowToolTip callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when a tooltip is displayed. The data object provides the tooltip jQuery object, area-specific options, mapKey, and selection state.

```javascript
$('#myimage').mapster({
  onShowToolTip: function (data) {
    var $me = $(this), // HTMLAreaElement element bound to the tooltip (null when triggered programmatically)
      tooltip = data.toolTip, // jQueryObject of the tooltip container
      areaOptions = data.areaOptions, // area specific options defined for this area/area group
      key = data.key, // mapKey for this area
      selected = data.selected; // true or false based on current area state
  }
});
```

--------------------------------

### ImageMapster Beatles Menu Setup

Source: https://jamietre.github.io/ImageMapster/overview/demos

Initializes ImageMapster on the #beatles-img element with custom options. Defines captions for each band member, single and all-area highlight styles, and mouseover/mouseout callbacks to display captions. Binds to the image's mouseover/mouseout events to activate or deactivate all areas, with a check for IE<9 to avoid double-firing.

```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',
      fillOpacity: 0,
      stroke: true,
      strokeColor: 'ff0000',
      strokeWidth: 2
    },
    all_opts = {
      fillColor: 'ffffff',
      fillOpacity: 0.6,
      stroke: true,
      strokeWidth: 2,
      strokeColor: 'ffffff'
    },
    initial_opts = {
      enableAutoResizeSupport: true,
      autoResize: true,
      mapKey: 'data-name',
      isSelectable: false,
      onMouseover: function (data) {
        inArea = true;
        $captionHeader.text(captions[data.key][0]);
        $captionText.text(captions[data.key][1]);
        $captionInstructions.hide();
        $captionBandMember.show();
      },
      onMouseout: function () {
        inArea = false;
        $captionBandMember.hide();
        $captionInstructions.show();
      }
    },
    opts = $.extend({}, initial_opts, single_opts);


  // Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the
  // original demo. Check whether an area has been activated with "inArea" - IE&lt;9 fires "onmouseover"
  // again for the image when entering an area, so all areas would stay highlighted when entering
  // a specific area in those browsers otherwise. It makes no difference for other browsers.


  $image
    .mapster(opts)
    .on('mouseover', function () {
      if (!inArea) {
        $image
          .mapster('set_options', all_opts)
          .mapster('set', true, 'all')
          .mapster('set_options', single_opts);
      }
    })
    .on('mouseout', function () {
      if (!inArea) {
        $image.mapster('set', false, 'all');
      }
    });
});
```

--------------------------------

### onMouseout callback example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when the mouse pointer leaves a bound area. The data object provides the event, area-specific options, mapKey, and selection state.

```javascript
$('#myimage').mapster({
  onMouseout: function (data) {
    var $me = $(this), // HTMLAreaElement element clicked
      e = data.e, // jQueryEventObject - see https://api.jquery.com/category/events/event-object/
      options = data.options, // area specific options defined for this area/area group
      key = data.key, // mapKey for this area
      selected = data.selected; // true or false based on current area state


    // ...
  }
});
```

--------------------------------

### set_options method usage example

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Updates (merges) ImageMapster options without redrawing. The options object can include area-specific rendering overrides, as shown with the 'TX' key.

```javascript
// update (merge) options
$('#someimage').mapster('set_options', {
  fillColor: '00FF00',
  areas: [
    {
      key: 'TX',
      render_highlight: {
        fillOpacity: 0.3
      }
    }
  ]
});
```

--------------------------------

### isSelectable option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets isSelectable to false for the entire map, but allows selection for the area with key 'TX'.

```javascript
$('#myimage').mapster({
  isSelectable: false,
  areas: [
    // area TX is isSelectable
    { key: 'TX', isSelectable: true }
  ]
});
```

--------------------------------

### Select images with specific selectors for mapster

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Shows three selector examples for targeting images: all images with a usemap attribute, a specific element by id, and images with a class. Using a more specific selector is faster than selecting all images.

```javascript
// images with a usemap attribute
$('img[usemap]').mapster(options);
```

```javascript
// element with the id of myimage
$('#myimage').mapster(options);
```

```javascript
// images with a class of image-map
$('img.image-map').mapster(options);
```

--------------------------------

### Use custom keys with mapKey to select areas

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Define your own keys on area elements and use the mapKey option to identify and select groups of areas. The example shows an image map of the U.S.A. with data-key attributes and a script that binds with mapKey 'data-key' and selects four states.

```html
<!-- an image map of the U.S.A -->
<img src="..." usemap="#mymap" />
<map name="mymap">
  <area data-key="AZ" href="#" coords="..." />
  <area data-key="AK" href="#" coords="..." />
  <area data-key="AR" href="#" coords="..." />
  <area data-key="AL" href="#" coords="..." />
  <area data-key="CO" href="#" coords="..." />
  ...
</map>
```

```html
<!-- bind using "data-key" as a mapKey, and select four states -->
<script>
  $('#myimage')
    .mapster({
      mapKey: 'data-key'
    })
    .mapster('set', true, 'AK,AZ,AR,AL');
</script>
```

--------------------------------

### boundList option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Binds a jQuery collection of list items to the image map. The list items must have an attribute matching listKey whose value matches the area's mapKey attribute.

```javascript
$('#myimage').mapster({
  boundList: $('#my-list').find('li')
});
```

--------------------------------

### HTML map areas for resize example

Source: https://jamietre.github.io/ImageMapster/overview/demos

HTML map with area elements defining polygonal regions for various cities. Each area has data-alt and data-title attributes used as map keys.

```html
<area
    href="#"
    shape="poly"
    coords="1029,470,1048,468,1105,508,1102,511,1114,513,1118,536,1116,541,1111,541,1100,547,1097,567,1081,589,1073,590,1070,599,1063,602,1055,610,1035,592,1028,588,1022,593,1013,581,1008,578,997,572,999,561,996,558,1001,548,1001,544,1010,532,1010,508,1013,499,1011,495,1024,480,1028,481"
    data-alt="Winterswijk"
    data-title="Winterswijk"
  />
  <area
    href="#"
    shape="poly"
    coords="11,696,31,696,53,687,84,700,104,696,133,703,173,689,175,712,165,719,165,736,109,748,114,752,114,769,81,773,80,767,88,757,87,750,88,739,79,734,63,722,55,724,50,734,45,729,35,717,13,705"
    data-alt="Zaltbommel"
    data-title="Zaltbommel"
  />
  <area
    href="#"
    shape="poly"
    coords="613,534,614,525,621,516,630,518,640,511,640,505,647,499,661,505,661,513,665,520,677,518,680,515,698,516,703,513,708,513,710,532,691,533,686,537,684,541,676,546,666,543,665,548,668,548,668,574,710,604,710,604,689,613,686,610,677,614,669,606,670,602,662,597,652,597,640,597,637,596,637,583,642,581,649,562,647,560,649,540,654,537,655,532,640,532,633,543,627,541,626,534"
    data-alt="Zevenaar"
    data-title="Zevenaar"
  />
  <area
    href="#"
    shape="poly"
    coords="697,369,743,353,755,367,771,367,806,363,808,374,780,388,773,401,769,403,750,398,748,405,748,412,743,412,741,403,736,398,724,398,722,388,721,380,715,367,698,367,698,356,715,355,719,353,729,353"
    data-alt="Zutphen"
    data-title="Zutphen"
  />
</map>
```

--------------------------------

### rebind method: replace options and redraw map

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Use the 'rebind' method to fully replace existing options and immediately apply them to the map, resetting state. Unlike 'set_options', it does not merge options. The example shows rebinding with custom fillColor and fillOpacity options.

```javascript
// rebind map replacing all current options
// with ImageMapster defaults overridden by
// the options specified
$('#someimage').mapster('rebind', {
  fillColor: '00FF00',
  fillOpacity: 0.5
  // ...
});
```

--------------------------------

### get_options

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Gets current or effective options for a bound image map. When called with no parameters, returns the options that the mapster was configured with. When called with a single key, returns the area-specific options assigned to that area. The effective parameter determines whether the actual options in effect for this area, or the specific options assigned are returned.

```APIDOC
## get_options

### Description
Get current or effective options for a bound image map. When called with no parameters, returns the options that the mapster was configured using. When called with a single key it returns the area-specific options assigned to that area. The final parameter `effective` determines whether the actual options in effect for this area, or the specific options assigned are returned. Areas inherit the global options assigned, but can be overridden by area-specific options. The `effective` options contain all options including those that are inherited, as well as any specifically assigned to the area.

### Usage
- `$('area').mapster('get_options');`
- `$('area').mapster('get_options' [, effective]);`
- `$('img').mapster('get_options');`
- `$('img').mapster('get_options', key [, effective]);`

### Parameters
#### Optional Parameters
- **effective** (boolean) - Optional - When `true`, returns effective rather than assigned options. Default: `false`.
- **key** (string) - Required when calling on an image - A single value identifying an area or area group corresponding to a value in mapKey.

### Examples
```javascript
// returns configured options specific to area
$('#somearea').mapster('get_options');
// returns all current effective options for area
$('#somearea').mapster('get_options', true);
// returns configured options for image
$('#someimage').mapster('get_options');
// returns configured options for area with key of TX
$('#someimage').mapster('get_options', 'TX');
// returns all current effective options for area with key of TX
$('#someimage').mapster('get_options', 'TX', true);
```
```

--------------------------------

### Create yourzepto.js with required Zepto modules

Source: https://jamietre.github.io/ImageMapster/overview/getting-started

Create a module that exports a Zepto build with the required modules: event, ie, fx, touch, and selector (required as of v1.5.0). This file is used to alias jquery in your bundler.

```javascript
var $ = require('zepto-modules/zepto');


require('zepto-modules/event');
require('zepto-modules/ie');
require('zepto-modules/fx');
require('zepto-modules/touch');
require('zepto-modules/selector');


module.exports = $;

```

--------------------------------

### ImageMapster Vegetable Tray Configuration

Source: https://jamietre.github.io/ImageMapster/overview/demos

Initializes ImageMapster on the #vegetables-img image with tooltips, single selection, and dynamic tooltip updates. The onClick handler updates the dip tooltip when asparagus is selected.

```javascript
$(function () {
  // a cross reference of area names to text for each area's tooltip
  var 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();
        } else {
          $selectionsDetails.hide();
          $selectionsInstructions.show();
        }
        if (data.key === 'asparagus') {
          newToolTip =
            "OK. I know I have come down on the dip before, but let's be real. Raw asparagus without any of that " +
            'delicious ranch and onion dressing slathered all over it is not so good.';
        }
        $image.mapster('set_options', {
          areas: [
            {
              key: 'dip',
              toolTip: newToolTip
            }
          ]
        });
      },
      showToolTip: true,
      toolTipClose: ['tooltip-click', 'area-click', 'image-mouseout'],
      areas: [
        {
          key: 'redpepper',
          fillColor: 'ffffff'
        },
        {
          key: 'yellowpepper',
          fillColor: '000000'
        },
        {
          key: 'carrots',
          fillColor: '000000'
        },
        {
          key: 'dip',
          toolTip: defaultDipTooltip
        },
        {
          key: 'asparagus',
          strokeColor: 'FFFFFF'
        }
      ]
    };


  $image.mapster(opts);
});
```

--------------------------------

### ImageMapster initialization for frog menu

Source: https://jamietre.github.io/ImageMapster/overview/demos

Initializes ImageMapster on the frog image with options for auto-resize, single selection, and custom highlight. Uses includeKeys to link each hot area to its corresponding menu area, and altImage to render the highlight with an alternate image.

```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);
});
```

--------------------------------

### Per-area altImage with render_select and render_highlight

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Shows how to assign different alternate images per area and per effect. TX uses img3, KS uses img2 for select and img3 for highlight, CO uses a direct URL. Areas without altImage use the default (none).

```javascript
$('#myimage').mapster({
  altImages: {
    img2: '../examples/images/usa_map_720_alt_2.jpg',
    img3: '../examples/images/usa_map_720_alt_3.jpg'
  },
  areas: [
    {
      // TX will use img3 for highlight/select
      key: `TX`,
      altImage: 'img3'
    },
    {
      // KS will use img2 for select
      // and img3 for highlight
      key: 'KS',
      render_select: {
        altImage: 'img2'
      },
      render_highlight: {
        altImage: 'img3'
      }
    },
    {
      // CO will use usa_map_720_alt_4.jpg for highlight/select
      key: 'CO',
      altImage: '../examples/images/usa_map_720_alt_4.jpg'
    }
  ]
});
```

--------------------------------

### ImageMapster initialization with singleSelect and fill options

Source: https://jamietre.github.io/ImageMapster/resources/feedback

User code attempting to initialize ImageMapster on an element with id 'test'. It sets singleSelect to true, fillColor to '00000', fillOpacity to 1, and mapKey to 'color'. Note: there is a missing comma after mapKey: 'color' which may cause a JavaScript error.

```html
<img src="Second.jpg" usemap="#Second_Map">
<map name="Second_Map">
<area shape="poly" alt="" coords="305,295, 414,295, 414,330, 395,330, 395,398, 305,398, 305,295" href="#C.Lab2">
</map>
<script text="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
<script text="text/javascript" src="jquery/jquery.imagemapster.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#test').mapster({
  singleSelect : true,
  fillColor: '00000',
  fillOpacity: 1,
  mapKey: 'color'
  fill : true,
});
});
```

--------------------------------

### listSelectedClass option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the class name added or removed when an area is selected or deselected. Default is null.

```javascript
$('#myimage').mapster({
  listSelectedClass: 'isselected'
});
```

--------------------------------

### listSelectedAttribute option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the element property updated with a boolean when an area is selected or deselected. Default is 'selected'.

```javascript
$('#myimage').mapster({
  listSelectedAttribute: 'checked'
});
```

--------------------------------

### isDeselectable option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets isDeselectable to false for the entire map, but allows deselection for the area with key 'TX'.

```javascript
$('#myimage').mapster({
  isDeselectable: false,
  areas: [
    // area TX is isDeselectable
    { key: 'TX', isDeselectable: true }
  ]
});
```

--------------------------------

### mapValue option example

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the attribute name on area elements used to identify them for onGetList. The value is included in the callback data.

```javascript
$('#myimage').mapster({
  mapValue: 'data-description'
});
```

--------------------------------

### tooltip method: activate, show by key, and remove tooltip

Source: https://jamietre.github.io/ImageMapster/reference/api-reference

Shows how to use the 'tooltip' method to activate a tooltip bound to the applied area, activate a tooltip for a specific area key, and remove the active tooltip. Works even when the global showToolTip option is false.

```javascript
// activate tooltip bound to the applied area
$('#somearea').mapster('tooltip');
// activate tooltip for area identified by "key"
$('#someimg').mapster('tooltip', 'key');
// remove active tooltip
$('#someimg').mapster('tooltip');
```

--------------------------------

### Configure stroke and fill options with render_highlight and render_select

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Shows how to set rendering options globally and per-area. The stroke effect is enabled for all areas, with a strokeWidth of 2 for highlights. For area 'somearea', stroke is disabled and fillOpacity is 1 for selections only. For 'someotherarea', fill is disabled for both highlight and select.

```javascript
$('#myimage').mapster({
  stroke: true,
  render_highlight: {
    strokeWidth: 2
  },
  areas: [
    {
      key: 'somearea',
      stroke: false,
      render_select: {
        fillOpacity: 1
      }
    },
    {
      key: 'someotherarea',
      fill: false
    }
  ]
});
```

--------------------------------

### JavaScript to initialize map and handle resize

Source: https://jamietre.github.io/ImageMapster/overview/demos

Initializes ImageMapster on the image with mapKey 'data-title' and stroke styling. Binds click handlers to resize buttons, calling mapster('resize', width, height, duration) with fixed heights and durations.

```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);
  });
});
```

--------------------------------

### Select areas by class using mapster('set', true)

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

After binding, you can programmatically select areas. This example selects all area elements with class 'group1' as if they were clicked.

```javascript
$('area.group1').mapster('set', true);
```

--------------------------------

### onStateChange

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Callback when an area changes state, either highlight or select.

```APIDOC
## onStateChange

### Description
Callback when an area changes state, either highlight or select.

### Type
`function(data: { key: string, state: string, selected: boolean })`

### Default
`null`

### Parameters
- **data.key** (string) - The mapKey for this area.
- **data.state** (string) - The new state: "highlight" or "select".
- **data.selected** (boolean) - True or false based on current area state.

### Example
```javascript
$('#myimage').mapster({
  onStateChange: function (data) {
    var $me = $(this), // HTMLImageElement of the bound image
      key = data.key, // mapKey for this area
      state = data.state; // "highlight" | "select",
    selected = data.selected; // true or false based on current area state
  }
});
```
```

--------------------------------

### configTimeout usage

Source: https://jamietre.github.io/ImageMapster/reference/configuration-reference

Sets the timeout for image loading to 30000 milliseconds. If images do not load within this period, initialization fails with an error.

```javascript
$('#myimage').mapster({
  configTimeout: 30000
});
```