Components | Map of clicks

"Map of clicks" is a component that allows turning an image into an interactive element, adding clickable areas to open different elements (popups, documents, or websites).

This component is added within the screens by default (See here) and pop-ups (See here), but it can also be added inside other components (for example, a Row).

You will find this component in the group of "Image" components.

Setup process

1. Access "Properties" tab, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). Additionally, you can configure the rest of properties of this component.

2. Choose the type of panel you want to create:

Standard. This type of click map allows you to add areas that can be linked to popups, documents or web links.
With panels. This type of click map allows you to link the areas with panels, that is, areas of content that are displayed on the screen, preventing additional windows from opening.

Check out this short video to see the differences between the two types:

3. Additionally, the rest of the properties of the Click Map can be configured (see properties in the table at the end of this article)

4. Access the “Add” tab and add as many “Areas” as you need. By default, areas are created on the left-upper area of the image. Their position can be changed as preferred.

5. If you have chosen a "With Panels" click map, you must add the "Panel Block" component. Then, inside, you can add as many panels as you need to associate with the areas. At the end of this article you can review the properties of the panel block and the panels. Text and images can be added within the panels.

6. Click on each "Area" and move them to the area of the image you want and modify its size. Also, in its properties, select what action will happen when you click on the area:

If it is a Standard click map, you can link them with "Link to popup", "Link to resource" or "External link".
If it is a panel click type map, you can link them with "Panel link".

7. In addition, we can configure shape, position and size of clickable areas (see list of properties at the bottom of this page).

8. To finish, select the Click Map and, in the "Add" tab, you will see that you can optionally add the "Instruction" component or a "Caption".

Map of clicks Properties

PROPERTY

DESCRIPTION

View Lets you select the type of click map you want to create:
- Standard. It will allow linking the areas with a popup, a document or a web.
- With panels. It will allow linking the areas to panels. Style Property only available in "Click Map with Panels" view.
It allows to decide the style or position of the panels:
- Horizontal: they will be placed below the image.
- Vertical: will be placed next to the image.

Resource

Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png, and gif.

Title

Title chosen for the Map of clicks. Optional

Alternative text

Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge.

Width

This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

First, we should select a size percentage under 100% in "Width" property (25%, for instance).
"Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
We use arrows to move the component and put it on the text.

Panels position Property only available in "with Panels" view.
It allows to decide in which position the panels will be arranged, according to what has been chosen in the "Style" property:
- Top / Left area: If it has Horizontal style, the panels will be placed on the image. If it is Vertical, they will be on your left.
- Lower / Right area: If it has Horizontal style, the panels will be placed under the image. If you have a Vertical style, they will be on your right.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
Non objetive: this audio will not an objetive to complete the unit.
Interact: It is necessary interact with the component to reach the objective.
Complete: it is necessary to click on all the existing areas to exceed the goal.

Clickable area Properties

PROPERTY

DESCRIPTION

Link to popup

This field allows selecting the popup we want to open when clicking on each image.

Link to resource

Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png, and gif.

External link

If we want to link a website, we should include its URL in this field.

Panel link Field only available in "with Panels" click map view.
Lets you decide which panel will open when you select the area.

Title

Title chosen for the Map of clicks. Optional

X Position (px)

Horizontal position where the clickable area begins. It is measured in pixels.

Y Position (px)

Vertical position where the clickable are

Panel Block Properties

PROPERTIES DESCRIPTION Background color Defines the background color of the instruction area. Icon color Defines the color of the instruction icon Font color Sets the color of the instruction text.

Panels properties

PROPERTIES DESCRIPTION Title Panel title. It is important to give it a name in order to recognize the panel when linking it to the corresponding area. Background color Panel background color. Background opacity You can define a color opacity to make it more or less transparent. It will be useful if we also add a transparent PNG image. Background image You can replace the background color with a background image.