Introduction

ImageMapster makes HTML image maps useful. It is a jQuery pluginExternal link leaves this site that lets you activate HTML Image MapsExternal link leaves this site without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6+, and mobile devices like iPads, iPhones and Androids.

See getting started for information on how to install and use ImageMapster.

Features

Section titled Features

Highlight and select areas

Section titled Highlight and select areas

• Automatic highlighting of HTML image maps on mouseover

• Control color, opacity, border, fade effects, and more for highlight and select

• Click to select/deselect one or more areas, or allow highlighting only by disabling isSelectable

• Use like a toggle or menu with the singleSelect option

• Define areas as inactive or always active with staticState

Create cool effects using alternate images

Section titled Create cool effects using alternate images

• Use any other image to render fill and select effects with altImage

• Regular fills and borders can be used in combination with alternate image to create complex highlight and selection effects

Bind the image map to an external list

Section titled Bind the image map to an external list

• Link user actions to an external list using boundList

• Automatically generate list from user-defined attributes in the image map data with onGetList, optionally sorted by specifying a sort order using sortlist

Show tooltips for areas or area groups

Section titled Show tooltips for areas or area groups

• Effortlessly create area-specific tooltips
• Use the default tooltip container, or create a custom toolTipContainer using any HTML template
• Manually activate or deactivate tooltips with the tooltip method

Use masks to create complex functionality

Section titled Use masks to create complex functionality

• Group areas together into logical entities that will be selected or highlighted together

• Link groups so that activating one group also activates another group using includeKeys

• Exclude areas inside of other areas by using isMask

• Areas can be members of more than one group, allowing you to get creative. For example, create concentric selection areas by defining an interior area as both a mask and its own selection group

Automatically resize and scale

Section titled Automatically resize and scale

• Automatically resize image maps using the resize options

• Image map data can be automatically scaled to match the display size of an image using scaleMap

• Manually resize image maps by calling the resize method

History

Section titled History

ImageMapster was created by James TreworgyExternal link leaves this site. It started as a fork of David Lynch’s MaphilightExternal link leaves this site in early 2011. He wanted to add the ability to keep areas selected. Having a lot of ideas for interesting things that could be done with image maps, he ended up adding many more features. The code base that ImageMapster started from has basically been re-written from the ground up, however a few parts of the code, most notably the core VML rendering, still inherit directly from its Maphilight roots.

James put a great deal of effort into ensuring that ImageMapster will work reliably in many environments. Often, images will not be finished loading when the rest of a page has finished being configured. Javascript code will usually begin running before some page images have finished loading. It is critical that images be completely loaded before ImageMapster can configure itself: it needs to know their native and display sizes, make copies, and do other work. The software uses a number of different methods, depending on the browser, to ensure that everything is ready when it begins configuration.

Additonally, ImageMapster will queue commands issued to it before configuration is complete. This means you can write post-configuration code that works against your image map without concern for the timing of images being loaded. Any commands that ImageMapster receives before it’s done configuring will be queued, and processed in order once configuration is complete.

ImageMapster uses HTML5 canvases to do its work in modern browsers. In older browsers (Internet Explorer 6-8) it uses VML to achieve similar effects.

ImageMapster works in all major browsers (IE6+, Firefox 2+, Opera, Chrome, Edge, Safari) and on mobile devices.

James put in a lot of work making ImageMapster what it is today. If inclined, find out about how to thank him.