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.
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.
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:
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.
Setup
Follow these instructions to setup a HotSpotsPro stack:- Once installed, drag and drop a HotSpotsPro stack from the Stacks library into your RapidWeaver Stacks page
- In the HotSpotsPro stack settings, choose to use either a local image or a warehoused image, for the background canvas
- Click the blue button in edit mode, to add a new hotspot area
- Resize and reposition the hotspot using the slider controls shown when the hotspot area is selected
- 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
- 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. Any quote marks or other special characters provided within the lightbox titles should be properly marked-up as HTML entities. 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.
