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), 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. Areas are created on the left-upper corner of the image. They can be moved and resized to put them wherever we want.

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".

Remember: The instruction can only be added on the "Standard" type map. If you add an instruction, in its properties you can define whether it is a standard instruction or with a background color.

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 in the Author's Guide), 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.

Visible buttons

We can choose whether to show or hide a clickable button. If the button is shown, an icon will appear over the image indicating the clickable area.

Animated areas

This field is only enabled when "Visible buttons" status is "Yes".
When clicking on "Yes", the button will show a little animation to catch users' attention.

Visible area background

We can decide whether we want to show the background of the visible area. For example, hiding this background will be useful if the button is enabled.

Visible area border It allows to establish a visible border to the area to be able to mark it better. Instruction position Allows you to place the instruction at the top or bottom of the click map. Panels position Property only available in "Click Map 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

Style This is only useful if we have set the "Visible areas" property to "Yes."
It allows deciding two different aspects for the area:
1. Area with animated icon. Displays a circle, which may or may not be animated with the "Animated Buttons" click map property.
2. Area with static icon. Displays a fixed, non-animated icon.

Link to popup

Link to tooltip

Link to resource

External link

Fields only available in "Standard" click map view.

Allows you to link the area to a popup, to tooltips, a resource (eg a pdf) or a web page. Only one of the 3 options is allowed.

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

Color Allows you to apply custom color to the area and / or its border, depending on the chosen display settings. Animated icon color Allows you to customize the color of the animated icon associated with the area.

Shape

We can choose the shape of the area. There are three options available: ellipse, rectangle, and rounded rectangle.

Icon position (visited area)

We can choose the icon position on the visited area. There are five options available: left-upper corner, right-upper corner, right-lower corner, and centre of the area.

X Position (px)

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

Y Position (px)

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

Width

Width of clickable area. It is measured in pixels.

Height

Height of clickable area. It is measured in pixels.

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.