ImageMapper was originally developed by Tsooj Media. This latest version modernises the user interface. The stack works much the same as before. A couple of new features extend what you can do with ImageMapper.

What's particularly nice about ImageMapper is that alongside support for regular rectangle shapes, it can also handle circles and more intricate polygon shapes. As the screen is made smaller, some jQuery Javascript code is used to recalculate the point coordinates; therefore avoiding the issue of the image becoming cropped or your areas not aligning correctly with the image underneath.

Possible alternatives to ImageMapper include the free HotSpots stack and the premium HotSpotsPro stack.

A stack like ImageMapper could be used to create an interesting format of website navigation. Either links could be configured to open on other webpages or you could use anchors to scroll to other places in the same page. Support for custom attributes means you could potentially make use of addon lightbox effects too.


Here is a quick working example of ImageMapper, using the default settings. It was placed inside a free Shady stack, to accomplish the shadowed box effect. Links open when clicked:
ImageMapper Test Image Circle Polygon Rectangle Triangle


Follow these simple instructions for setting up ImageMapper, with mostly the default settings and the test image applied:
  1. Once installed into Stacks and RapidWeaver, open your Stacks library and search for 'ImageMapper'
  2. Drag and drop a copy of the stack into your webpage
  3. Click the blue '+' button to add areas. As an experiment, add three areas. Change the shape of each area to Circle, Polygon and Rectangle
  4. Preview your webpage. You should see the areas show over three of the corresponding shapes, on mouseover.

Building your own image map with ImageMapper:
  1. Return to the main ImageMapper settings and choose to use either a dragged and dropped image or a warehoused image, in the Image Source setting. Add your image
  2. Within the main ImageMapper settings, enable the Show Coordinate Inspector setting. Switch into RapidWeaver preview mode
  3. Ensure your stack is displaying at full-size. Click to draw the point coordinates on the image. Press 'Finished Measuring' when done
  4. Keep a careful note of these generated coordinates for each area. A pasteboard (e.g. a plain text file) can be useful to record them
  5. Switch back to edit mode. Delete test areas and add new areas with the blue '+' button. Populate each area with a title, link and your coordinates
  6. Select the main stack and disable the Show Coordinate Inspector option. Preview the page to see your functioning image map.

Image map areas can be added or removed at any time, from within edit mode. You can also change the order of areas by clicking and dragging them into a revised order. End users are able to tab between image map areas and press the 'return' key on their keyboard to open the links; so it is fairly important the areas are setup in a good running order.

Normally conventional image maps (like ImageMapper) do not display anything over the image until you come to mouseover the image. This can pose some usability problems and issues on devices that don't support mouse input (like smartphones and tablets). Many expert web developers recommend that you caption the image map to inform users they can mouseover or tap parts of the image.

It might be that you've previously built an image map with an older tool, like Map Design or an online tool. Sometimes it might be feasible to reuse these generated maps in ImageMapper. To do so, switch the Data Source setting to Source Code. Remove opening and closing <map> tags from your code. Paste the <area> tags into the box shown in edit mode. An existing image can be applied in the settings too. This does not always work with all image maps and we do not provide free support for maps created with other addons or plugins. However the ImageMapper stack is your best chance of simultaneously making an older image map responsive and getting it embedded within Stacks.

Coordinate points

It is worth noting that the format of the coordinates is slightly different, depending on the shape of the area you select to use. ImageMapper supports circles, rectangles and polygons. Surprisingly, Polygons are easiest to generate with the inspector tool; even though their point coordinate markup is more extensive. However you may want to deviate and use circles or rectangles for particular areas. The following information might help you understand how coordinates in image maps work; depending on the shape you are working with.

Circular Area
A circle point takes 3 arguments; left position (x) top position (y) and radius (r):

P = (x,y,r)

In the coordinate settings, the coordinates for a circle might look something like this:


In this instance, the circle centre is 140px from the left, 308px down from the top, and the circle has an internal radius of 86px.

Polygonal Area
A polygon point takes 2 arguments for each corner; left position (x) top position (y):

P = (x,y)

In the coordinate settings, the coordinates for a polygon might look something like this:

395,227, 499,227, 550,308, 500,391, 395,391, 343,308

In this instance, the first corner of the area is 395px from the left, 227px down from the top. Each of the other 'pairs' denotes another corner. We can determine this polygonal area has 6 sides.

Rectangular Area
A rectangle point takes 4 arguments; two for the top left corner (x) and two for the bottom right corner (y):

P = (x1,y1, x2,y2)

In the coordinate settings, the coordinates for a rectangle might look something like this:

53,31, 224,194

In this instance, the first corner of the area is 53px from the left, 31px down from the top. The opposing corner is 224px from the left and 194px down from the top.