Thanks! Please check the following:
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.

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.

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.
 

Example

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 https://example.com when clicked:
 
ImageMapper Test Image Circle Polygon Rectangle Triangle
 

Setup

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:

140,308,86

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 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.