Area groups in ImageMapster

ImageMapster has had the capability to form complex area groups for some time, but never got around to documenting it well. More recently, I added a keys feature that lets you get the keys associated with an area (or another key), and also the ability to pass rendering options directly with the set method. This opens up a lot of possibilities for area manipulation that were possible but not very easy before.

I put together an example showing how area groups can be used, along with these new features, to have a great deal of control over the effects.

Take a look at it on jsFiddle and play around! I'm going to start a library of interactive examples to include on the web site. If you like it, let me know, or put together one that shows your own techniques so I can share it!

Complete documentation is on the project web site.

Intro to the ImageMapster Area Groups example:

This example shows how to use mapKey to create groups that you can use to control sets of areas independently.

• Each area in the imagemap has a custom attribute data-state. This defines the groups that each area belongs to.
• The mapKey: 'data-state' option identifies this attribute for the imagemap. The values in the mapKey can be used to select, deselect or highlight areas or groups of areas from code.
• Areas can belong to more than one group. In this example, New England states belong to three groups: a state code like "ME", the group "new-england", and possibly the group "really-cold".
• Options can be set for area groups. These options only apply when the group is activated using its group name. Notice if you click a New England state, it's red (like the other states) but when you activate it using "new-england" or "really-cold", it's blue.
• When you mouse over an area, the first group in the list determines what gets highlighted. In this example, most states are actually defined by more than one area HTML element. The first value of data-state is the state code, ensuring that when you mouse over a state, all the different areas that make it up get highlighted together, even if they aren't connected. New England states and Hawaii are good examples of this (the islands are separate, and the New England states have separate text markers).
• Areas are separate logical entities. You will notice if you click one of the group links, then highlight a state in New England, it highlights again (in a different color, per the render_select options). This means that area groups are not *directly* a good way to just act as if the user selected each area in the group, but...
• You can use the keys method to get the primary keys for a group, and the get_options method to get the options, and set them manually. Click "New England As Separate States" below. The "Texas with Custom Options" is a simpler case of setting custom rendering options.