Live Examples

The following sources can be used to view ImageMapster in action!

ImageMapster Repository

Section titled ImageMapster Repository

Within the ImageMapster Github RepositoryExternal link leaves this site there is a comprehensive set of examples with complete source code. To interact with the examples:

• Visit ImageMapster ExamplesExternal link leaves this site to view them live.
• Visit Development -> ExamplesExternal link leaves this site for details on running them on your local machine in order to review/change code.

JSFiddle

Section titled JSFiddle

These demos are all set up for you on JSFiddleExternal link leaves this site.

• Clean USA Map DemoExternal link leaves this site - The USA Map set up, ready for you to play with.
• Vegetable Tray DemoExternal link leaves this site - Shows using different area options, and capturing events

How do I …?

Section titled How do I …?

• Work with groups of areas?
  • Area GroupsExternal link leaves this site - Demo showing how to use multiple groups per area to create supergroups that you can control indepently from code
  • Set up profiles that control the effects used to render groups of areasExternal link leaves this site - Without too much trouble you can create option profiles of options and apply them to groups of areas automatically.
• Pre-select certain areas on the map?
  • Select areas in advance, and they can’t be deselected by the userExternal link leaves this site
  • Just select areas in advanceExternal link leaves this site- The user can deselect them.
• Get the image map to adjust to the size of the browser window?
  • Manually resize the mapExternal link leaves this site when browser resizes
  • Have ImageMapster automatically resize the mapExternal link leaves this site when browser resizes
• Set up complex effects in advance as the background, and then activate the map using different effects?
  • Use “snapshot”External link leaves this site - to convert the current state of the map into the background
  • Another exampleExternal link leaves this site - using different effects on a specific area
• Darken the image when someone first mouses over it and show the current area undarkened, e.g. the inverse of the usual behavior?
  • Use “snapshot”External link leaves this site - like above to make the image dark, then use the canvas toDataUrl method to grab the dark image. altImage is used with the image itself to highlight over the darkened backdrop.
  • Insert a filterExternal link leaves this site - between ImageMapster’s layers to create a darkening effect over the original image, without affecting the highlights.
• Use imagemapster to “fill in” areas on an image data sent from the server?
  • This exampleExternal link leaves this site shows how to configure ImageMapster with external data.
• Track more than two states (unselected, selected1, selected2) for each area?
  • Track three different selection statesExternal link leaves this site with this example. It can easily be adapted for more than three.
• Bind an external list?
  • Use “boundList” optionExternal link leaves this site to associate map areas with items in a list
  • Use “onGetList” optionExternal link leaves this site to dynamically build external list and associate with map areas