Fork Me on Github
ImageMapster Logo


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.)

    How do I...

    Work with groups of areas?

    Pre-select certain areas on the map?

    Get the imagemap to adjust to the size of the browser window automatically?

    Set up complex effects in advance as the background, and then activate the map using different effects?

    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?