{"id":12626,"date":"2018-10-01T10:34:36","date_gmt":"2018-10-01T02:34:36","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=12626"},"modified":"2024-10-23T14:20:49","modified_gmt":"2024-10-23T06:20:49","slug":"hotspot","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hotspot\/","title":{"rendered":"Hotspot"},"content":{"rendered":"\n

This article applies to versions 4.6.2 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

Overview<\/h2>\n

The Hotspot component allows a user to click on a designated area of the page, and navigate to a specified location or it can be configured to set page variables. It is transparent to the user and is ideal for overlaying on images, text labels, and other components.<\/p>\n

\"\"<\/a>

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

When a user hovers over a hotspot, the cursor changes to indicate that this is a hyperlink. When configuring the component, you should line up the hotspot borders with the components being overlaid, such as a text label and image.<\/p>\n

\"\"<\/a>

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

Note: Because you are overlaying another component with a hotspot, you need to use a Precision Layout<\/a>. If you drag a precision 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

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

\n

The Hotspot Editor<\/h2>\n

Link Action, Variables, and Variable Mapping<\/a> are at the heart of configuring a hotspot component \u2014 specify what to open, where to open it, and optionally add variable mapping. Alternatively, sepcify what variables to set on the current page (see Using the Hotspot to Set Page Variables<\/a><\/em>).<\/p>\n\n\n\n\n
A hotspot with a Link Action Type of: Open Trend, Open Page, New Trend<\/em> or Open URL<\/em><\/td>\nA hotspot with a Link Action Type of: Set Variables<\/em><\/td>\n<\/tr>\n
\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

There are two aspects to the hotspot's configuration:<\/p>\n\n\n\n\n
Link Action<\/strong><\/td>\n\n

Type:<\/strong> Specify the type of link you want to open: trend, page, or URL. Or select Set Variables<\/em>, which does not open another page or trend, but is used to set variables on the current page.<\/p>\n

Workspace<\/strong>: To open pages or trends, specify the workspace containing the page or trend; this is because page and trend names can be duplicated across different workspaces.<\/p>\n

URL<\/strong>: To open a URL<\/em>, specify the full address.<\/p>\n

Trend Name<\/strong>: For a Trend<\/em> hotspot, specify which trend to open.<\/p>\n

Page Name<\/strong>: For a Page<\/em> hotspot, specify which page to open.<\/p>\n

Header<\/strong>: For a URL<\/em> hotspot, optionally specify a header.<\/p>\n

Tab Type<\/strong>: This specifies where the page, trend, or URL is opened: New Explorer Tab, Same Explorer Tab, or New Browser Tab.<\/p>\n

Note:<\/strong>
\n<\/em> <\/span>For security reasons, Explorer will not display insecure content within a secure context. If Explorer is using HTTPS (secure) then a URL using HTTP (insecure) will be opened in a new browser tab regardless of the specified Tab Type. I.e. If Explorer uses https<\/em> but the link is to an http<\/em> site, then it will open in a new browser tab.<\/p>\n<\/td>\n<\/tr>\n

Variable Mapping\/Variables<\/strong><\/td>\n\n

Pass variables from the current Explorer page to the page, trend, or URL you are linking to. Click Add<\/strong> to add a new variable mapping, or click Remove<\/strong> to remove the variable mapping.<\/p>\n

Each variable mapping needs a source (coming from the page you are on) and a target (for the trend\/ page\/ URL you are opening). The source and the target should have matching data types. See the tutorials for some examples.<\/p>\n

Note that for the Set Variables<\/em> Link Action type, Variables<\/em> replaces Variable Mapping<\/em> (see Using the Hotspot to Set Page Variables<\/a>).<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

For a full description of these options, see Link Action, Variables, and Variable Mapping<\/a>.<\/p>\n

 <\/p>\n

\n

Using Multiple Hotspots<\/h2>\n

You can have multiple hotspots over a single image, as shown in this example. If you have a labelled image, you can place hotspots over the labels to link to different things.<\/p>\n\n\n\n\n\n
In Display Mode<\/strong><\/td>\nIn Design Mode<\/strong><\/td>\n<\/tr>\n
In display mode, the cursor changes when the user hovers over a hotspot.<\/td>\nIn design mode, each hotspot is coloured according to the style selected (by default, light pink).<\/td>\n<\/tr>\n
\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorials<\/h2>\n

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

These tutorials demonstrate how overlay hotspots over an image on a page to open different URLs, and a trend. Tutorial 1 focuses on opening a simple link, while Tutorial 2 looks at the more advanced usage of opening a trend and mapping a variable.<\/p>\n

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

In this tutorial we'll add two hotspots onto an image. We'll configure each hotspot to open a URL to different sites: Perth Weather and Sydney Weather, respectively. At the end of this tutorial your page should look something like this, in display mode:<\/p>\n

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

Step 1. Prepare a Studio Page<\/strong><\/p>\n

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

In this step, we're going to open a new Explorer page using the Grid Layout, and then add a Precision Layout component to one of the grid cells.<\/p>\n

1. Click the New Page<\/strong> button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n

For this exercise, we'll keep the 4 grid cells.<\/p>\n