HotSpots stack for RapidWeaver

HotSpots

Tip If you're looking for an image map stack which requires no HTML markup to setup and has lots of different settings and functionality as standard, consider looking at the HotSpotsPro stack instead. This is based on the free HotSpots stack, but includes many user-requested features.

The HotSpots stack solves the age-old problem of building responsive image maps. Normally image maps are of a fixed size (in pixels) and require specialist software or scripting to get setup. In the HotSpots stack, we've turned things around; by providing a basic image map solution for RapidWeaver that's fully responsive and requires no additional plugins or software to get working. In essence, all we're doing in this stack is to display a static image, and then draw some square boxes in different positions over the image. By specifying the position and dimensions of these square boxes (links) in percentage units of measurement, everything correctly scales to the same proportions as the original background image.

Image maps have lots of different uses in websites. Done correctly, they can provide a fast and friendly form of website navigation. The HotSpots stack works on all major web browsers; including desktop, tablet and most smartphones. Although the HotSpots stack requires the limited use of some HTML code; even if you've never touched HTML code before, you should find setup of the HotSpots stack straightforward. You can use either a local image dragged and dropped into your Stacks page, or an image already stored online.

Example

Here is a very quick example of the HotSpot stack in use. In this example, three clickable regions were defined over the yachts photograph. The links are set to http://example.com, but could just as easily be set to another address.

Setup

You can use one or more HotSpot stacks in the same page. HotSpots is compatible with most RapidWeaver themes, including ThemeFlood themes. For the quickest and easiest setup, follow these instructions:

When installed, drag and drop a HotSpots stack into your Stacks page.
In the HotSpot settings, choose between using a local image (dragged and dropped into the placeholder, from your computer) or a warehoused image (from a location online). For best results, use images that are correct scaled to size and optimised for the web.
Double-click the code region, shown in stacks edit mode. Every image hotspot is formed using a regular HTML anchor tag, with the positioning and sizing specified using inline CSS, in percentage units of measurement. Remove anchor tags that you're not using or add new ones.
To set a hotspot as a link, replace the '#' character in each anchor tag with a URL. This URL can point to a named anchor on the same page, a page elsewhere in your website, an external website or a file download etc.
HotSpot titles can be amended if necessary (these get displayed as informational tooltips when a user rolls a mouse over the hotspots).
Change any of the settings, to adjust the style and appearance of the HotSpot stack. Settings are basically split between static and hovered status.

It works better to start at one corner of the image and setup each individual hotspot, one at a time. You can keep toggling between preview and edit mode in RapidWeaver, to fine-tune your HotSpots stack and get the hotspots positioned and sized exactly where you want them.

HotSpot stack markup

Even if you've not used HTML code before, the markup (code) needed for each hotspot region is not too difficult to work with. This is the basic code needed for a single hotspot:

<a href='#' class='HotSpot' title='HotSpot 2' style='top:10%; left:60%; height:20%; width:30%;'></a>

What we have here is a pair of standard opening and closing anchor tags (used for defining links in a page). Inside the opening anchor tag, we have href='', class='', title='' and style='' attributes.

The href='' attribute is where you enter a link, for the hotspot region to link towards. The class='' attribute with its value of HotSpot is used to assist with styling the hotspot region, based on style settings you configure in the stack. The title='' attribute is optional, and can be setup to display and information tooltip on rollover. Finally you have a style='' attribute; which includes inline CSS code for telling a web browser the horizontal and vertical position of the hotspot region, and its width and height dimensions; based on the proportions of the image itself.

The first time you drag and drop a HotSpot stack into a page, four example hotpot regions will get rendered over your image. These can help you get your first hotspots setup, and you can also duplicate the code and customise it for each hotspot thereafter. We just use simple HTML code to define the hotspot regions, therefore removing the need for complicated markup or scripts to generate the image map.

Percentages versus pixels

By specifying your hotspot positions and sizing using percentage units of measurement, you should finish-up with an image map that is fully responsive. This means it'll scale proportionately to the size of your image. The hotspots you setup will remain correctly positioned and sized, to match the image behind.

If you wanted to, you could use other units of measurement (like pixels). But at that point you would find that the image map does not scale so well at different screen sizes. Percentages work much better in any instances where you're building with flexibility or responsive behaviour in mind.

Shapes

The Hotspots stack only supports use of squares and rectangles. We don't support circles or polygons, in order to keep things much simpler for you to setup and work with. Possibly if you wanted to create slightly more complex shapes, you could setup multiple smaller hotspots close to each other, and give them the same link. This method would allow you to create some basic shapes.

Text in hotspots

With care, you can put text inside hotspot regions. To do so, enter your text before the closing </a> tags. However it should be noted that text will not be scaled as the image size reduces. Currently there is no clean or reliable method to make text scale-down on smaller screens. So this technique should only be considered when you're working with larger hotspot regions and don't have much text (more than a few words) to display.

Bootstrap tooltips

In ThemeFlood RapidWeaver themes, you can also take advantage of Bootstrap tooltips. These small popups can be set to display on hover. The second example shown above (the portraits) is a good example of this technique. To get tooltips working, you replace the title='' attribute with the following:

data-placement="bottom" data-original-title="Tooltip Title Goes Here"

These HTML5 data attributes tell the Bootstrap Javascript which side (placement) of the hotspot the tooltip should be shown (choose either left, right, top or bottom). And the data-original-title attribute is the tooltip text you want to display. The final step in the setup process is just to ensure jQuery, Bootstrap.js and the tooltips function is called somewhere on the page; and this code can either go in your content container or sidebar:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="%pathto (bootstrap/js/bootstrap.min.js)%"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.HotSpotWrapper').tooltip({
		html: true,
		selector: "a[data-toggle=tooltip]"
	})
});
</script>

*Remove spaces in the Bootstrap Javascript SRC call above, so the path resolves. As already emphasised, Bootstrap tooltips will only work in ThemeFlood themes, as these include the Bootstrap Toolkit.

Print / PDF output

Hotspot stacks are automatically removed from displaying in print and PDF output. You can use stacks like the free UsefulStack if you wish to conditionally display alternative content.

Browser compatibility

Hotspots has been tested and confirmed to work in IE9, IE10, IE11, and the latest versions of Safari, Firefox, Chrome and Opera web browsers. It may work in older web browsers too, although you may find that cosmetic embellishments like the rounded corners and animation effects degrade gracefully. On touch devices, tapping a hotpot opens the link.

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.

Stacks4Stacks