Tokyo - Components | Map of clicks
Last modified:
"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.
|
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". |
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:
|
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. |
Panel Link | Field only available in "with Panels" click map view. |
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. |