FAQ

Some common questions about ImageMapster. If you don’t see your question here, checkout our supportExternal link leaves this site page for other ways to get help.

How do I …?

If you’re having an issue or are wondering how to accomplish something with ImageMapster, here are some things to try:

Look at the demos page - Each demo is accompanied by markup and script snippets
Look at the live examples page - There are many examples where you can see the code and tinker with it yourself. This is the best way to learn!
Check out github - There are lots of questions in the issuesExternal link leaves this site section and you search to see if someone has asked a similar question. There are also several issues that offer guidance on specific questions/issues labeled with “support.”
Look at the feedback page - A lot of one-off questions have been asked and answered there.
Check StackOverflow - There’s a small archive of ImageMapster-related questionsExternal link leaves this site. We’re not quite the Beatles, but we’re big in Europe we hear.

… if you still can’t figure it out, see our support pageExternal link leaves this site for ways to get help.

Is ImageMapster free?

Yes. You can use it in any way you want to, under the terms of the MIT licenseExternal link leaves this site.

How can I thank you for your work?

If you feel ImageMapster has been extraordinarily useful to you, you can contribute directly to my coffee fund:

Other ways to contribute

Write code: Fork the project on githubExternal link leaves this site. Add features and/or write tests to fill out some areas currently not well covered by the test suite.
Share your public project: Add some feedback letting others know how you are using ImageMapster and feel free to provide a link if you can!
Contribute to issue discussion: Help others by answering questions or investigating a potential bug from our open issues listExternal link leaves this site

What are the dependencies?

The only dependency is jQuery, version 1.7.1 or later. If you encounter a problem, recommend making sure you are on the latest version of jQuery and ImageMapster as a first step. If the problem still exists, please open an issueExternal link leaves this site to let us know about it.

Can I use Zepto instead of jQuery?

As of the ImageMapster version 1.3.2, ImageMapster fully supports Zepto version 1.2.0 or later. Please see the Zepto getting started section for more information.

What browsers are supported?

ImageMapster supports all major browsers:

Chrome 4+
Edge (all versions)
Firefox 2+
Internet Explorer 6+
Opera 9+
Safari & other webkit browsers

Any bugs/features in supported browsers?

With Internet Explorer 6-8, the altImage feature is not supported, as HTML5 canvas support is needed for this. ImageMapster will still fall back to normal fill rendering if this feature is used with IE6-8.
With Firefox 3.6, masks do not work properly and the outer area may not be highlighted. This is because of a bug in Firefox 3.6. It would be possible to code around it but it was decided that it’s not worth creating a new code branch to support one specific, old browser version. Marks work properly in older and newer versions of Firefox.

If you are experiencing an issue not listed above, check out the issues listExternal link leaves this site.

Does it work on mobile/touchscreen devices?

Yes. It works on any device that supports HTML5 canvases, and that includes all modern devices.

On some older Android devices, the native web browser does not seem to handle image load events well, and complex scenarios may require special handling.

How do I make image maps?

There are lots of ways to do this.

Use an online tool such as image-map.netExternal link leaves this site.
Commercial drawing tools like Photoshop have capabilities to create image maps.
If you’re creating a map for a geographical entity, like states or countries, someone’s probably done it already. Google is your friend. Check Wikipedia CommonsExternal link leaves this site for public domain maps, too.

How can I scale image maps to a different size?

You can let ImageMapster do it for you with the scaleMap option. It will automatically adjust the map data when it detects that an image is not being shown in its native size. Most of the time, this is what you’d want, because most of the time an HTML image map would be designed around the native size of an image. If you don’t want this behavior for some reason, you can turn set scaleMap: false and ImageMapster will not adjust your image map no matter what. Be aware that auto-scaling is different than auto-resizing. If you are using autoResize, you will want to maintain the default value of true for scaleMap, otherwise your hotspots will not be located in the expected location.

If you just want to use an image at a different size than the image map you happen to have represents, and would rather not have your users download an image at a larger size than you need, then you can transform it to the correct size using the Image Map ResizerExternal link leaves this site tool. This tool will also let you define a clipping area if you want to create a new image map that represents a cropped area within a map you already have.

Couldn’t I do something like this with CSS3?

With CSS3 you can accomplish some similar functionality, but managing the data is much more difficult, and irregularly shaped areas would be next to impossible to implement. More sophistocated effects would also be impossible without the use of canvases.

What about SVG?

An image map doesn’t really do anything other than let the browser detect when the mouse enters and leaves predefined areas. You can do the same thing with SVG data, but SVG doesn’t exist in some older browsers, whereas image maps exist in all browsers.

You can convert SVG data to an HTML image map without too much trouble. Here are a couple resources:

The actual data and shapes used by SVG and HTML image maps are pretty much identical so it’s really a matter of transforming the markup.