Thanks! Please check the following:
System requirements
License agreement
Refund policy
Purchase process
Sales Tax & VAT
Customer support

System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress).

We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with. Separate fees may apply.

License agreement

You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

If the free demo version does not work for you, kindly refrain from buying the stack.

Purchase process
The checkout system is provided by Paddle. An attempt is made to display prices in your local currency.

To complete your order, you must supply a valid email address. Your purchase receipt and download link will be sent to this address. If you do not receive your purchase shortly after completing it, please carefully check your spam or junk mail folders.

Your purchases are available to re-download at anytime, via this order lookup page.

Sales tax and VAT
As of 1st January 2015, the European Union has implemented a law that requires VAT to be collected on the purchase of any digital downloads supplied to citizens of any EU country.

All sellers worldwide are legally required to comply with this law. Failure to comply can result in prosecution of both sellers and customers.

Based on the information you supply at the checkout, if it is determined you are buying from within the EU, your purchase will include the mandatory amount of VAT. The amount of VAT paid depends on the country you are buying from.

You will receive a full VAT invoice / receipt at the end of your transaction, confirming what has been paid.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
This video can be viewed at fullscreen.
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. Free stacks like RottenApple might be useful to conditionally display such messages on handheld devices.

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.
Bookmark or share this page
Baidu 百度
Renren 人人网
Weibo 微博
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!
We use cookies and other services to give you the best possible experience on our website. If you continue without changing settings, we'll assume you are happy with this.