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

3. Click on each created "Area" to move and resize the image, if you wish. You can also go to its properties and decide what will happen when clicking on the area: "Link to popup", "Link to resource" or "External link".


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

4. Finally, select the Map of clicks, go to "Add" tab and insert an "Instruction" or "Caption" (if required).

Map of clicks Properties

PROPERTY

DESCRIPTION

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.

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "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).
  3. 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 buttons

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.

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.

Title

Title chosen for the Map of clicks. Optional

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.