What are hotspots, I hear you ask. Hotspots are active areas positioned over an image. They can be activated to display information, when the mouse hovers over them, or they can contain an external link that is activated on mouse click. The external link may, of course, be a lightbox or a gallery that opens on the same page.
A word of warning – If you have a previous version of HotSpots installed, uninstall it before you install the new version to avoid conflicts.
The stack settings have been greatly simplified since the original version – in part, of course, due to the release of Stacks3.
When you drop HotSpots onto a Stacks page, you'll see a container with an 'add child' + button.
I recommend that you first add an image to the image well in the settings panel. The image may be local, or warehoused.
Once you have an image loaded, you can begin to add your hotspots by clicking the + button.
The main stack's settings will allow you to set up the general appearance of the hotspots. The very first setting is Edit Highlight. This is the highlight colour of the hotspot that you are currently editing – it makes it more obvious in edit mode, which of your 50 spots is currently active.
Lightbox – when activated, will enable the following lightbox settings:
Gallery adds next and previous arrows to the lightbox, enabling users to move to the next, or previous image.
Content Type is set to Auto[detect] by default. The options are AJAX, iFrame, Images, Inline, or Video. The lightbox function is demonstrated on the HotSpots product page.
Effect offers seven options for the image changes.
Next follow the colour options for the Window Shade, Title Fill and Title text.
Toggle will allow your visitor to toggle the annotations on and off to view the main image undisturbed.
Toggle Button and Toggle Fill let you set the colours for said toggle. The instruction text may be freely defined.
Tooltips – the hotspot info that is displayed on hover – may be deactivated.
The hotspots may display an icon which may be an image, or a font awesome icon. Place Icon Bottom Centre does just as it says.
The next eight settings are for the tooltip appearance.
Then finally, you will find the settings for the HotsSpot Global Styling and Mouse Cursor.
Once you have activated your first hotspot, you can click it (a great advantage over previous versions) and check the settings panel again.
The first settings are for the positioning, in percent, from the Left and from the Top of the image.
Then you have the Width, the Height and the Tooltip Position, the HotSpot Link settings, the Title Text and the Content Or Icon.
These settings are all best made in preview mode.
Each of the hotspots can be set to Custom Settings – an override that allows you to set the Background Fill, Borders and the Content settings individually for each HotSpot.
HotSpotsPro 3 is a great improvement over previous versions and well worth taking a look at.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16