Disclaimer: This demo is old and the code is stylistically bad and probably difficult to understand. I strongly recommend using the online demos at the project web site as references for learning how to use imagemapster. I have kept this in the project mostly as a way to play with different options, but the code is a poor example of style and I would not advise using it as a learning tool.
Using This Demonstration
- Change rendering options for highlight or select and click "update" to cause them to take effect.
- If you change the "Highlight Fill" or "Selection Fill" option, the map and all other options will be reset. (As of version 1.2.4.043 the fill type can't be changed after the map is bound.)
Choose the style in which highlights will be rendered. For fill, "normal" uses solid color fills. The other options use an alternate image as the source of the fill. "Alternate image" requires HTML5 canvas support. In browsers that do not support it, typically Internet Explorer < 9, it will always look the same as "normal."
Make changes to the options below and click here to update the map:
Image Size | ||
|---|---|---|
|
You can change the size of an image just by changing the width or height attributes. Size (enter width only, max. 720): | ||
Highlight Types |
Selection Styles |
Options |
|
Choose the style in which highlights will be rendered. Highlight fill: Stroke (border):
Stroke width: Stroke opacity:
Fill opacity:
|
Choose the style in which selections will be rendered. Selection fill: Stroke: Stroke width:
Stroke opacity: Fill opacity:
|
Enable/disable toolTips. [disabled] Enable/disable singleSelect. [disabled] Enable/disable isDeselectable. [enabled] Unbind the map. Rebind the map. Click here to unbind, preserving state. Mouseout delay: |
Get Data Out | ||
| Click here to show selected items: | ||