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.
Checkout  
Following on from the massive success of the HotSpots stack, this 'pro' version is a 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 live previewing of the image and hotspot regions in Stacks edit mode. We provide support for up-to twenty hotspot regions per-stack, and multiple hotspot stacks can be safely used on the same page. 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 module. 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.

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 is 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.

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:
Image Map
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:
Image Map
The ability to make hotspots invisible (by turning off their borders and background fills) opens up some incredibly creative ideas. The example below was created by hand-drawing a basic doodle in Pixelmator and saving it as a JPG image. Once loaded as the HotSpotPro background, it's then feasible to position and layer navigation links over each of the items. This could be used to add a quirky style of navigation to a website.
Image Map
This example is using Font Awesome icons to create map pins. Font Awesome icons are supported in ThemeFlood RapidWeaver themes, and can be enabled in the stack settings for non-supported themes. A base font size of 50px is set by default. Clicking on a hotspot reveals a linked image within a lightbox (images are stored within a shared Dropbox folder). Each hotspot region is 5% wide and 15% tall. Optionally, the 'gallery' setting an 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).
Image Map
In this example, a panoramic photograph taken on an iPhone was used as the background. Four hot spot regions were enabled, each measuring 7% wide and 30% tall. The 'toggle' was enabled, so that visitors viewing this HotSpotsPro stack can toggle the hotspots on an off, using the control above. Internal content, backgrounds, borders and tooltips were disabled in the settings. Font Awesome Icons were enabled (using the markup <i class="fa fa-plus-circle"></i>). Each hot spot region is set to open a link (http://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:
Image Map

Setup

Follow these instructions to setup a HotSpotsPro stack:
  • Once installed, drag and drop a HotSpotsPro stack into your RapidWeaver Stacks page.
  • In the HotSpotsPro stack settings on the right, choose to use either a local image or a warehoused image, for the background. Most people find it’s easier to start with a local image to begin with, and then switch-over to a warehoused version of the same image later on; for faster live-previews of the stack inside RapidWeaver.
  • Scroll-down to the Hotspot Configuration groups, to configure each of the hotspot regions. You can adjust its position, size and other attributes like tooltip positioning, links and titles. Dimensions and positioning are specified in percentage units of measurement, for greater flexibility.
  • Change any of the other style or colour settings shown in the HotSpotsPro General Settings group. For example, you can turn-on lightbox, internal content or tooltip support. You can also customise things like opacity, rounded corners, background fills and border styling.
  • Preview and publish your page to see the final results.

By default when you first add a HotSpotsPro stack to your page, only the first four hotspots will be active. This is completely normal. You can activate up-to 25 hotspot regions by ticking the 'Enable Hotspot' setting, against each corresponding hotspot to have more hotspots displayed. Unused hotspot configuration groups can be collapsed, to keep your workspace tidier. If you need to setup more than 25 hot spot regions, you will need to enable the 'manually coded hotspots' setting, as documented below.

This stack may appear laborious to use at first, but with some practice you’ll find it becomes very fast and efficient for building quality image maps. Expect to spend a couple of hours learning how HotSpotsPro works, familiarising yourself with its settings and experimenting with its output. This stack offers a great deal of customisability, not found in the image map stacks.

As always, rolling your mouse cursor over specific settings will display an informational tooltip about what each setting does. In edit mode, the numbers of the individual hotspot regions are displayed in the top-left of each hotspot corner, for easier reference (these numbers are not displayed in the previewed or published webpage).

Titles provided with 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.

The lightbox effect in HotSpotsPro is powered using the open source (MIT licensed) Nivo Lightbox jQuery plugin. By default, the content type is set to 'iframe' in the settings, to display the example.com website. However you can have the lightbox display other 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; therefore you will need to enable the Apply Links option in the stack settings, if you've not done so already.

You can display basic content (like text and images) within each hotspot region. To do this, you need to enable the Internal Content option in the HotSpotPro settings. This action will display a Stacks placeholder over each hotspot, into which you can drag and drop basic stacks or content. Particular care should be exercised, to ensure that any internal content will scale proportionately to the rest of the image map. To help you achieve this; text size is specified in pixel units of measurement and then reverts to viewport width (in newer web browsers) when the HotSpotsPro stack is less than the Scale Point setting specified in the settings. This system of font scaling ensures that text and font icons scale more proportionality on smaller screen sizes.

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.

HotSpotsPro should only be used in conjunction with RapidWeaver themes that are using an HTML5 doctype. Consult with your theme documentation or ask the developer if you're unsure about this. This is because HotSpotsPro is using special HTML5 markup (like data attributes) that are not backwards-compatible with older versions of (X)HTML. All premium ThemeFlood RapidWeaver themes make use of the newer HTML5 doctype.

Manually coded hotspots

This new option (added in version 2.0) allows you to manually code your hotspot regions, and works as a replacement to the existing GUI (graphical user interface) configuration controls for the 25 hotspot regions. Manual coded hotspots is a setting intended for users reasonably comfortable working with HTML / CSS markup and wanting more than 25 hotspots per HotSpotsPro stack; avoiding the need to slice an image into multiple HotSpotsPro stacks. It can also be useful in instances where you need to do more advanced things, like applying different icons to different hot spot regions or having links open in the windows etc. Start by checking (enabling) the Manually Coded Hotspots option in the General Settings. You will then see an HTML placeholder presented below your HotSpotsPro image, which is where you enter the markup for each manual coded hotspot area.

Be sure that smart quotes is turned off in RapidWeaver and on your computer in System preferences before attempting to edit any HTML markup. This is the standard HTML markup for manually coded hotspot region:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;'>
<a href='http://example.com' class='HotSpotLink'></a>
</div><!--/HotSpot-->

This markup comprises of an HTML divisional container. Inline CSS is applied to determine to top and left position of the hotspot area, combined with its width and height. Note that we use percentage units of measurement for all these dimensions, so that the completed HotSpotsPro stack is fully responsive on different screen sizes. You are welcome to use other units of measurement if you prefer (like pixels) but the completed image map may not be responsive. If no link is required, replace the address http://example.com with a # (hash) character.

In instances where you want to apply a background fill to each hotspot area, include a divisional container with the HotSpotFill class selector name like this:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;'>
<a href='http://example.com' class='HotSpotLink'></a>
<div class='HotSpotFill'></div>
</div><!--/HotSpot-->

If you want to apply borders to your hotspot areas, include a divisional container with the HotSpotBorderContainer class selector name like this:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;'>
<a href='http://example.com' class='HotSpotLink'></a>
<div class='HotSpotFill'></div>
<div class='HotSpotBorderContent'></div>
</div><!--/HotSpot-->

If you want to include internal content in your hotspot areas, include a divisional container with the HotSpotInternalContent class selector name like this, and enter a short sentence of text:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;'>
<a href='http://example.com' class='HotSpotLink'></a>
<div class='HotSpotFill'></div>
<div class='HotSpotBorderContent'></div>
<div class='HotSpotInternalContent'>Some text goes here</div>
</div><!--/HotSpot-->

For map icons, you will likely want to forego backgrounds, borders, and internal content, so just use a divisional container with a class of HotSpotIcon and the desired Font Awesome Icon code inside:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;'>
<a href='http://example.com' class='HotSpotLink'></a>
<div class='HotSpotIcon'></div>
</div><!--/HotSpot-->

To enable support for tooltips on your hotspot regions, you will need to add the following Bootstrap Tooltips data attributes to your hotspot container:

<div class='HotSpot' style='top: 5%; left: 5%; width: 10%; height: 12%;' data-title='Tooltip Title' data-toggle='tooltip' data-placement='top'>

In the above code, replace Tooltip Title with the actual text you want displayed in the tooltip and optionally change the placement value to one of either top, left, right or bottom.

To enable support for lightboxes, you'll want to add the following attributes and values to your anchor <a> tag:

<a href='http:example.com' class='HotSpotLink' data-lightbox-gallery='gallery1' data-lightbox-title='Lightbox Title' data-lightbox-type='images'></a>

The data-lightbox-gallery='gallery1' attribute and value is optional, and is provided to determine which gallery set an individual lightbox belongs to (allowing you to have backwards and forwards navigation buttons between content). The lightbox title is the title displayed below your content in lightbox mode. The type value should be one of either ajax, auto, iframe, images or video and assists with determining what type of lightbox is required, based on the content type.

Note: Manually coded hotspot areas will not be rendered in edit mode, over your image. If you find it easier, you should construct your image map in an external code editor first (like Espresso or TextWrangler) with the following markup; which may prove faster and more efficient that trying to edit HTML markup directly in RapidWeaver:

<div class="HotSpotWrapper">

<img src="path/to/background/image.jpg" class="HotSpotProImage%id%" alt="Image Map">

<div class='HotSpot' style='right: 5%; top: 5%; width: 15%; height: 12%;'>
<div class='HotSpotBorderContainer'></div>
</div>

</div>

<style type="text/css">
.HotSpotWrapper {
display: block;
position: relative;
overflow: visible;
border: 1px solid yellow;
}

.HotSpotWrapper .HotSpotProImage {
display: block;
position: relative;
max-width: none;
width: 100%;
height: auto;
}

.HotSpotWrapper .HotSpot {
position: absolute;
z-index: 5;
display: block;
overflow: visible;
}

.HotSpotWrapper .HotSpot .HotSpotBorderContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid red;
}
</style>

Once happy with the placement of your hotspot regions, you can copy the HTML markup back into the HotSpotsPro stack.

Browser compatibility

HotSpotsPro has been throughly tested and confirmed to work in IE7, IE8, IE9, IE10, IE11, and the latest versions of Safari, Chrome, Firefox and Opera. Please note that some cosmetic embellishments (like opacity, animation effects and rounded corners) will be ignored in older versions of IE. Also of note; IE7 does not support Font Awesome Icons. The free RottenApple or Conditionals stack can be used if you want to hide HotSpotsPro on particular versions of IE or handheld devices.

Print and PDF output

If a page containing HotSpotPro stack is printed or saved as PDF, the background image will print within the normal page flow. Hotspots, links and tooltips are automatically hidden from view (for tidier output). It's possible to remove HotSpotsPro stacks altogether from print / PDF output and replace them with supplementary content using the free UsefulStack.
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.