Demos
The demonstrations on this page show how to use some of ImageMapster's features. The first, "Big USA Map," is an interactive demo that lets you change many options interactively to see how they affect the image map. The other demos are far simpler and show how to use specific features. The "Joints" demo is a project contributed by a user from a private web site.
The last item is links to some demos set up on JSFiddle that you can play with or fork. This section will grow.
-
Big USA Map Demo
-
Vegetable Tray
-
Frog Menu
-
Beatles Menu
-
Shapes
-
Resize
-
Skeleton Joints
-
Fiddle With It
These demos are all set up for you top play with on JSFiddle. (More to come.)
- Clean USA Map Demo - The USA Map set up, ready for you to play with.
- Vegetable Tray Demo - Shows using different area options, and capturing events
How do I...
Work with groups of areas?
- Area Groups - 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 areas. 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?
- Highlight areas in advance, and they can't be deselected by the user
- Just select areas in advance. The user can deselect them.
Get the imagemap to adjust to the size of the browser window automatically?
- Resize the map when the user resizes
Set up complex effects in advance as the background, and then activate the map using different effects?
- Use "snapshot" to convert the current state of the map into the background
- Another example 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" 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 filter 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 example shows how to configure ImageMapster with external data.
Track more than two (unselected or selected) states for each area?
- Track three different selection states with this example. It can easily be adapted for more than three.