API Reference

This is a complete reference to Image Map Pro's API. It is intended for developers who want to integrate Image Map Pro into their own applications and add custom functionality.

HTML

This is a list of all HTML attributes provided by Image Map Pro. For an example of how can you use them, please see the API section of this documentation.

HTML Attribute	Description
`data-imp-highlight-object-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will highlight an object. The value of the attribute represents the title of the object.
`data-imp-unhighlight-object-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will unhighlight an object. The value of the attribute represents the title of the object.
`data-imp-highlight-object-on-click`	When a user triggers a click event on this element, the plugin will highlight an object. The value of the attribute represents the title of the object.
`data-imp-unhighlight-object-on-click`	When a user triggers a click event on this element, the plugin will unhighlight an object. The value of the attribute represents the title of the object.
`data-imp-show-tooltip-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will open an object's tooltip. The value of the attribute represents the title of the object.
`data-imp-show-tooltip-on-click`	When a user triggers a click event on this element, the plugin will open an object's tooltip. The value of the attribute represents the title of the object.
`data-imp-hide-tooltip-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will hide an object's tooltip. The value of the attribute represents the title of the object.
`data-imp-hide-tooltip-on-click`	When a user triggers a click event on this element, the plugin will hide an object's tooltip. The value of the attribute represents the title of the object.
`data-imp-trigger-object-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will highlight an object and open its tooltip. The value of the attribute represents the title of the object.
`data-imp-trigger-object-on-click`	When a user triggers a click event on this element, the plugin will highlight an object and open its tooltip. The value of the attribute represents the title of the object.
`data-imp-untrigger-object-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will unhighlight an object and hide its tooltip. The value of the attribute represents the title of the object.
`data-imp-untrigger-object-on-click`	When a user triggers a click event on this element, the plugin will unhighlight an object and hide its tooltip. The value of the attribute represents the title of the object.
`data-imp-focus-object-on-mouseover`	When a user triggers a mouseover event on this element, the plugin will zoom into an object, if zooming is enabled. The value of the attribute represents the title of the object.
`data-imp-focus-object-on-click`	When a user triggers a click event on this element, the plugin will zoom into an object, if zooming is enabled. The value of the attribute represents the title of the object.
`data-imp-change-artboard`	When a user triggers a click event on this element, the plugin will change the currently active artboard. Then value of the attribute represents the title of the artboartd.

JavaScript Functions

Functions in Image Map Pro's API are used when you want to make a change in the interactive image. For example if you want to open a tooltip or highlight an object, you need to use an API Function. For usage examples please see the API section of this documentation.

Function Name	Description
`ImageMapPro.highlightObject(imageName, objectTitle)`	Highlight an object with a title of `objectTitle` on an image named `imageName`.
`ImageMapPro.unhighlightObject(imageName, objectTitle)`	Unhighlight an object with a title of `objectTitle` on an image named `imageName`.
`ImageMapPro.focusObject(imageName, objectTitle)`	Zoom into an object with a title of `objectTitle` on an image named `imageName`, if zooming is enabled.
`ImageMapPro.showTooltip(imageName, objectTitle)`	Shows the tooltip of an object with a title of `objectTitle` on an image named `imageName`.
`ImageMapPro.hideTooltip(imageName, objectTitle)`	Hides the tooltip of an object with a title of `objectTitle` on an image named `imageName`.
`ImageMapPro.reInitMap(imageName)`	Reinitializes an image named `imageName`.
`ImageMapPro.isMobile()`	Returns `true` if the user is using a mobile browser, or `false` if he is not. This is the same check that the plugin does in order to determine it fullscreen tooltips are necessary. This function is useful if you want to make adjustments to the contents of the tooltips, or anything else when the user is on a mobile device.
`ImageMapPro.changeArtboard(imageName, artboardTitle)`	Switches to artboard with a title of `objectTartboardTitleitle` on an image named `imageName`.
`ImageMapPro.zoomIn(imageName)`	Zooms in on an image named `imageName`.
`ImageMapPro.zoomOut(imageName)`	Zooms out on an image named `imageName`.
`ImageMapPro.flashObjects(imageName)`	Triggers the "flash" pageload animation on an image named `imageName`.

JavaScript Hooks

Hooks are useful when you want to listen to actions that happen on the image, for example when the user has highlighted a specific object. For usage examples please see the API section of this documentation.

To subscribe to hooks:

    
ImageMapPro.subscribe((action) => {
  if (action.type === 'actionType') {
    // Do something
  }
}

Action Type	Payload
`mapInit`	`action.payload.map` - The name of the image that triggered the action.
`objectHighlight`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the object that got highlighted.
`objectUnhighlight`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the object that got unhighlighted.
`objectClick`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the object that got clicked.
`tooltipShow`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the object, to which the tooltip that just showed belongs to.
`tooltipHide`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the object, to which the tooltip that just closed belongs to.
`changeArtboard`	`action.payload.map` - The name of the image that triggered the action. `action.payload.object` - The title of the currently active artboard.
`zoomPanUpdate`	`action.payload.map` - The name of the image that triggered the action. `action.payload.zoom` - The current zoom level of the image map. `action.payload.pan.x` - The current pan in the X axis. `action.payload.pan.y` - The current pan in the Y axis.