Stroke (Outline) area, Stoke color and Stroke opacity
Similar to the Fill options, whether to add a Outline to the area on mouse hover of the available area's. Simply check the box, select a color and the opacity of the outline where 0 = fully transparent and 100 = fully opaque.

Fade in and Fade speed
Whether to use a fade in or directly show the chosen Maphilight options.

The Custom Input section is shown in edit mode of RapidWeaver and is placed below your image with the following look and feel,
each area has it's own 4 input elements:



Title
The title that is shown as a normal tooltip while hovering the area. This title cannot have special characters used in it!
We recommend keeping this title as short as possible.

Link
This is where you put the full url link to the web page you want the imagemap area to be linked to. In other words, this is where your visitor will be sent to when clicking on the image map area in your image. Of course you can also use a relative url, we advice to use the full absolute path for best results. You can also create a reference to a position on the current page with #position.

Shape
Choose from one of the three possible options, so all it takes is rect, poly or circle.

Coordinates
For all the shape types coordinates are used to determine the resulting area. Maybe you remember your "math lessons" from school ... those x,y coordinates. A rectangle requires two coordinate positions, that is x-left,y-top and x-right,y-bottom. A polygon requires multiple x,y coordinates and a circle requires only a single x,y coordinate and a radius value.

Maybe this sounds difficult to you, don't worry this is the part where the built-in Coordinate Inspector comes in to do the measuring part.

Using the Coordinate Inspector:
Rectangle, click on the top left position of the rectangle followed by clicking on the bottom right position.
Click Finished Measuring and your done;

Polygon, click on the first position of the polygon and repeat until all positions are marked by the Coordinate Inspector.
Finally click on Finished Measuring;

Circle, click on the center point of the circle to mark this position and then move your mouse to the outside of the circle to manually determine the radius.

As shown above we've added a small example for each of the input elements, all you have to do is click inside the gray box and replace the example with your own values.

As mentioned the Coordinate Inspector is the built-in tool of this stack that does all the measuring of coordinates for you. When enabled in the Image Mapper stacks HUD and turned into preview mode of RapidWeaver this tool shows it's features.



The feature buttons appear above your image and the coordinates placeholder (storage section with the measured coordinates) is placed below your image on the bottom of the page. Note that the Coordinate Inspector is show as an overlay above all other content on your page.

How to use the Inspector
Hover your mouse over the image and the X,Y coordinates automatically appear. Simply click on the current location to add the coordinates into the 'measured coordinates section'. You can use this 'placeholder' to create all your required area's and then copy and paste it into the custom input boxes of the Image Mapper stack. Note that the measured area numbers are in no way directly related to the already added area's in edit mode of the Custom Input section. So you can start measuring new area's any time.

Finished measuring area '1'
You can directly start the measuring by clicking on the required positions for the used shape type. When clicking on a position this is automatically marked with the chosen Inspector color. When finished you click this Finished measuring button. The Inspector automatically finalizes the used positions into a usable coordinates range and places that into the Placeholder.

Show / Hide Placeholder
Whether to show the Placeholder during measuring of the coordinate positions. Simply click this button to toggle the visibility of the Placeholder.

Hide while measuring
With this box checked the Placeholder is automatically made hidden after the "first" click on your image and is shown again after clicking the Finished measuring area button.

After dragging in your images you should always start by selecting the image and click on the wrench/spanner that appears on
the left side of the image. Then in the Image Inspector drag the size slider to 100%. Note that you should also set a nice Filename and Alt tag.




If this isn't solving the image size challenge then open the Page Inspector of your page and select the Page type Preferences tab. Ensure that the Reduce Large images setting is at least the size of your original image. As mentioned in the Little Snapper below: sometimes you should import the image again to see an effect.

We've had some questions about the most simple method to add links to internal pages of your RapidWeaver project file.
Since this stack is using a custom input section the normal add link dialog is not available, instead you can easily use the base url macro.

First make sure you've set a correct base url under your site details | web address:




After setting the base url you are able to use the RapidWeaver macro %base_url%. When using this macro RW automatically replaces it with the full web site address so all you have to do is add the subfolder and filename when required:

Advanced solution
Yes, that is if the used Lightbox supports Image Map Area's. Lets take for example the latest version of the Pretty Photo jQuery plugin. Add the following code into the link section that should trigger the Pretty Photo Lightbox:

#" rel="prettyPhoto[image_map]

This adds a link to the current page and also creates a reference for the Pretty Photo plugin to use. Then add the following code into you javascript section to make the plugin respond to the click event inside the Image Mapper Plus:

$("area[rel^='prettyPhoto']").prettyPhoto();


Stacks solution
I know the above example is probably for the more experienced javascript enthusiast so hereby a stacks solution that works very well with the Image Mapper Plus and that is the Expose stack.

Add the Expose stack below the Image Mapper Plus and only add your popup content in the Lightbox section of the stack, then in de HUD set your "custom unique ID". A simple reference to this ID that can be used in the Image Mapper Plus stack is shown below the Expose input sections.

Then in the Image Mapper Plus stack you can use the reference to this unique id by adding the following code into the Link section:

#your_unique_id" class="expose_your_unique_id


Note
Note that with both solutions you should not add the starting and ending quotes to the html tag elements since these are automatically added for you when adding links into the custom input sections.

You can add your rel value for external into the link field, that is without the starting and closing quotes:

http://www.website.com/filename.php" rel="external

This opens the link (after publishing) in a new window or tab from the used browser.

Compatibility update for the Stacks plugin version 2, released on 27 november 2011.

Stack renamed to Image Mapper Plus, released on 24 july 2011.

First public release on 19 july 2011.