ImageMapster

https://jamietre.github.io/ImageMapster/
Admin
ImageMapster is a jQuery plugin that activates HTML image maps, enabling area highlighting,...
Tokens:46,918
Snippets:309
Trust Score:9.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### 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' });
```

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

### 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 () {
    // ...
  }
});
```

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

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

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

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

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

### 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


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

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

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

```

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

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

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

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

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

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

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

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

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

### onHideToolTip callback example

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

Callback when a tooltip is closed.

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

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

### 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');
```

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

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

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

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

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

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

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

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

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

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

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

### 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


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

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

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

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

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

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

### 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 }
  ]
});
```
Tokens:
Raw