Image Hotspots (Інтерактивні плакати)

Тип вмісту «Гарячі точки зображення» дозволяє накладати гарячі точки на зображення та графіку. Користувач натискає гарячі точки, щоб відкрити пов’язаний текст.

У цьому посібнику ви дізнаєтесь:

• Коли використовувати гарячі точки зображення
• Як створити гарячі точки зображення

Приклад

Ось вміст гарячих точок зображень, який ми створимо в цьому посібнику: https://h5p.org/h5p/embed/824

Коли використовувати гарячі точки зображення

Гарячі точки зображень можуть бути корисними для швидкого та простого створення інфографіки. Використовуйте будь-яке зображення та збагачуйте його цікавими місцями та докладною інформацією про зображені деталі. Користувач активується шляхом взаємодії з зображенням.

Крок 1: Тема

Ми використаємо зображення різноманітних ягід із Wikimedia Commons як фонове зображення для наших точок доступу до зображень.

На зображенні три види ягід, тому ми додамо чотири гарячі точки:

• Полуниця
• Чорниця
• Ожина
• Малина

Крок 2: Створення гарячих точок зображення

Виберіть опцію «Новий вміст» і виберіть «Гарячі точки зображень» зі списку типів вмісту:

Крок 3: Редактор гарячих точок зображень

Тепер має з’явитися редактор гарячих точок зображень. Верхня частина редактора виглядає так:

Крок 4: Фонове зображення

Вибираючи фонове зображення, майте на увазі дві речі:

• Зображення буде масштабовано (пропорційно) відповідно до максимальної ширини контейнера, у якому воно розміщене.
• Можна переглядати гарячі точки зображення в повноекранному режимі.

Тому вибирайте зображення з відповідним дозволом.

Ми використовуватимемо зображення повної роздільної здатності, знайдене тут .

Не забудьте додати будь-яку ліцензію або інформацію про авторські права, пов’язану з фоновим зображенням, яке ви використовуєте.

Крок 5: Значки та колір

Далі є піктограма Hotspot і варіант кольору Hotspot :

Ви можете вибрати зі списку попередньо визначених значків або завантажити власний значок:

Колір гарячої точки є кольором фону для гарячої точки. Ви можете встановити колір фону для будь-якої попередньо визначеної піктограми. Колір вказується в шістнадцятковому форматі. Ви можете використовувати цей засіб вибору кольорів , щоб знайти шестизначний шістнадцятковий код для вибраного вами кольору.

Ми використаємо чорний колір із шістнадцятковим кодом 000000 і отримаємо такий кінцевий результат:

Крок 6: Створення точки доступу

Кожна точка доступу має такі атрибути:

• Заголовок
• Позиція гарячої точки
• Вміст спливаючого вікна

Ви можете додати скільки завгодно гарячих точок, якщо є достатньо місця, щоб розмістити їх усі у вашому зображенні.

Заголовок — це заголовок точки доступу, і він буде відкритий, коли користувач натисне кнопку точки доступу .

Клацніть будь-де на зображенні, де потрібно встановити точку доступу. З’явиться зелене коло, яке вказує на положення нової гарячої точки. Точку доступу можна змінити, клацнувши в іншому місці зображення.

Вміст спливаючого вікна може бути:

• текст
• Відео або
• Зображення

Popu p використовується для опису вибраної точки доступу. Точку доступу можна описати за допомогою тексту , відео або зображення. Ви можете додати скільки завгодно тексту. Смуги прокрутки з’являться, якщо на зображенні не видно тексту.

Ми використаємо Strawberries як заголовок нашої першої точки доступу та наступний текст :

Полуниця — єдиний фрукт із зовнішнім виглядом насіння, який, як кажуть, зміцнює імунітет.

Крок 7: Завершення

Натисніть кнопку «Додати точку доступу» , щоб додати три інші точки доступу подібним чином, як описано вище.

Збережіть вузол, щоб переглянути готові гарячі точки зображення.
Тепер у вас має бути такий самий результат, як у прикладі у верхній частині сторінки.
Не соромтеся залишати будь-які коментарі чи пропозиції щодо покращення цього підручника.