{"id":31611,"date":"2017-12-07T11:03:42","date_gmt":"2017-12-07T03:03:42","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31611"},"modified":"2018-10-12T16:17:00","modified_gmt":"2018-10-12T08:17:00","slug":"hotspot-4-4-0","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hotspot\/hotspot-4-4-0\/","title":{"rendered":"Hotspot (4.4.0)"},"content":{"rendered":"\n

This article applies to versions 4.4.0-4.5.3 of P2 Explorer. For the latest, see Hotspot<\/a>.<\/p>\n

Overview<\/h2>\n

The hotspot allows a user to click on a designated area of the page, and navigate to a specified location.<\/p>\n

The hotspot component is similar to the Hyperlink<\/a>. Unlike the Hyperlink with its visible Content<\/em>, the Hotspot is transparent and is ideal for overlaying images, text labels, and other components.<\/p>\n

\"\"<\/a>

A Hotspot in display mode<\/p><\/div>\n

When a user hovers over a hotspot, a cursor indicates that this is a hyperlink. The hotspot borders should line up to the overlayed component, for example a text label and image.<\/p>\n

\"\"<\/a>

Features of a Hotspot<\/p><\/div>\n

<\/i>BEST PRACTICE<\/span><\/p>\n

Because you are overlaying another component with a hotspot, you need to use precision mode. If you drag a precision mode layout onto a grid cell, then you will be able to move the 'set' of components easily, by moving the grid cell around.<\/p>\n<\/div>\n

Related: Using a Hotspot<\/a>, Link Action and Variable Mapping<\/a><\/p>\n

\n

The Hotspot Component<\/h2>\n

When configuring a hotspot component, specify what to open, where to open it, and optionally add variable mapping<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

For a full description of the hotspot properties, refer to the comprehensive reference<\/a> at the end of this article.<\/p>\n

 <\/p>\n

\n

Using Multiple Hotspots<\/h2>\n

You can have multiple hotspots over a single image, as shown in this example. Or if you have a labelled image, you can place hotspots over the labels.<\/p>\n\n\n\n\n\n
\u00a0<\/td>\nIn Display Mode<\/strong><\/td>\nIn Design Mode<\/strong><\/td>\n <\/td>\n<\/tr>\n
 <\/td>\nIn display mode, you can see the cursor as the user hovers over a hotspot.<\/td>\nIn design mode, each hotspot is coloured in light pink.<\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n\n

\"\"<\/a><\/p>\n<\/td>\n

\n

\"\"<\/a><\/p>\n<\/td>\n

 <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial 1: Hotspot for Weather Sites<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial we'll practise adding two hotspots onto an image. We'll configure each hotspot to open a URL to another site: Perth Weather and Adelaide Weather, respectively.<\/p>\n

\"\"<\/a><\/p>\n

There are three steps in the tutorial:<\/p>\n