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.
Following on from the massive success of the free HotSpots stack, this 'pro' version is a premium paid stack with all the extra features and functionality many people have been requesting. Unlike the free version, HotSpots Pro offers a completely code-free setup, with 'realtime' previewing of the image and hotspot regions in Stacks edit mode. Now updated for Stacks 3, we provide support for an unlimited number of hotspot regions per-stack, and multiple HotSpotsPro stacks can be safely used on the same webpage. Loads of style and colour settings are included, so you can customise many aspects of your image map and make it look like your own. No other image map addon for RapidWeaver can boast the same ease of setup and flexibility. You can learn more about the latest changes in HotSpotsPro 3, in this video.

Optional tooltips are achieved using the open source Twitter Bootstrap Tooltips component. The size and colour of tooltips can be changed easily in the stack settings. Because hotspots can be positioned anywhere over an image, we already provide the option for you to control whether tooltips are shown left, right, above or below a hotspot, for every individual hotspot. Alternatively if you have more to say, smooth scrolling anchors can elegantly take your users to other parts of the page!

By default, Hotspot links will open in the same window when clicked or tapped; so no annoying tabs or new windows to confuse your users with! However the option is provided for you to have Hotspots open within a lightbox window. We use a customised version of the popular open source Nivo Lightbox plugin. This Nivo Lightbox plugin is fully responsive and handles various content types including images, iFrames and video.

Our core criteria with HotSpotsPro was to provide RapidWeaver users with a high-quality image map solution. A stack which is easy to work with, simple to customise and behaves as expected in a variety of web browsers and screen sizes. This is very much a stack you can purchase once and use time and time again in all your RapidWeaver projects. Using HotSpotsPro, you can build professional image maps that captivate your audience and encourage far greater user-interaction. HotSpotsPro is ideal for use in business, e-commerce and education websites. HotSpotsPro 3 requires a minimum of RapidWeaver 6 and Stacks 3.

Examples

Here are some real-working examples of the HotSpotsPro stack, to give a quick indication of the sorts of things you can build with this stack. All HotSpotPro stacks were placed within UsefulStacks, to centre the image maps horizontally and apply a maximum width of 1200px wide.

This first example uses a single hotspot region. The background fill was switched off and a 3px dashed border was applied instead. Hovering over the hotspot region reveals a tooltip. The hotspot is set as a link to http://example.com when clicked:
This example was created by enabling tooltip support and adjusting the tooltip placement on each hotspot. Each hotspot region in this example has a size of 4.25% wide and 5% tall. Static opacity was set to 50% and hovered opacity was set to 99%. Border radius was set to 50px, to create the bullet-point effect. Links were disabled in this example, so that you just have tooltips display on hover or tap:
This example is using Font Awesome icons to create map pins. Clicking on a hotspot reveals a linked image within a lightbox (images are stored within a shared Dropbox folder). Optionally, the 'gallery' setting can be enabled, to include previous and next navigation buttons between multiple lightboxes. The map behind the map pints is a static image, courtesy of OpenStreetMaps.org (CC BY-SA).
In this example, a panoramic photograph was used as the background. Four hot spot regions were enabled. The 'toggle' was enabled, so that visitors viewing this HotSpotsPro stack can toggle the hotspots on an off, using the controller. Internal content, backgrounds, borders and tooltips were disabled in the settings. Font Awesome Icons were used (using the markup <i class="fa fa-plus-circle"></i>). Each hot spot region is set to open a link (https://example.com) when clicked or tapped. On mouseover, the icons dim to 70% opacity and shake.
Click to toggle points of interest on and off:

Setup

Follow these instructions to setup a HotSpotsPro stack:
  1. Once installed, drag and drop a HotSpotsPro stack from the Stacks library into your RapidWeaver Stacks page
  2. In the HotSpotsPro stack settings, choose to use either a local image or a warehoused image, for the background canvas
  3. Click the blue button in edit mode, to add a new hotspot area
  4. Resize and reposition the hotspot using the slider controls shown when the hotspot area is selected
  5. Change any of the other style or colour settings shown in the HotSpotsPro settings. For example, you can turn-on lightbox, smooth-scrolling or tooltip support. You can also customise things like opacity, rounded corners, background fills and border styling
  6. Preview your page to see the final results. Publish when done.

As always, rolling your mouse cursor over specific settings will display an informational tooltip about what each setting does. Titles you provide on every hotspot region will get used for tooltips or for lightbox titles (depending on which has been enabled). For best results, use short sentences of plain text. Basic HTML code is supported for tooltips.

You can hide HotSpotsPro stacks on smaller screens (like tablet or mobile) using the responsive controls in Stacks 3. This may be necessary if you test the stack and find becomes too crowded on smaller screens. Remember that on touch devices (like tablets and smartphones) hover gestures are not available, so features like optional tooltips maybe less reliable to depend on.

The lightbox effect in HotSpotsPro is powered using the open source (MIT licensed) Nivo Lightbox jQuery plugin. You can have the lightbox display different content types like images or video, by changing the content type setting. Likewise advanced users can also use the AJAX or inline content options too, as documented on the Nivo Lightbox website. Additional settings are provided to customise the opening animation effect, the RGBa lightbox overlay style and title colours. The lightbox is able to open and close singular elements or provide a gallery; the latter of which enables backwards and forwards navigation through multiple lightboxes. The lightbox will pickup and reuse the same links you apply to each hotspot region.

Background images for use in HotSpotsPro should be supplied in either JPG or PNG format, at 72 DPI. It's strongly recommend any images used in HotSpotsPro are properly optimised; and free software like ImageOptim is ideal for this task. Background images should be of sufficient width or height to fill the HotSpotsPro stack, which in-turn will scale to fit whatever page area you place it within. Use the free UsefulStack if you want to constrain the width of your HotSpotsPro stack and keep it centred in the page. The background image and hotspots will scale proportionately to fit different screen sizes.
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.