# Изображение с метками

Блок «**Изображение с метками**» это интерактивный блок, позволяющий расставить метки на изображении. Его можно использовать, чтобы показать, как выглядят те или иные объекты.

### Как выглядит блок?

[![imgspot0-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot0-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot0-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0" style="box-sizing: border-box; outline-color: var(--color-primary); outline-width: 1px; margin: 0px 0px 1em; padding: 12px; border: 1px solid rgb(221, 221, 221); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; vertical-align: baseline; display: block; color: rgb(68, 68, 68); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><summary style="box-sizing: border-box; outline-color: var(--color-primary); outline-width: 1px; margin: -12px; padding: 6px 12px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: rgb(238, 238, 238);">Как выглядит блок в меню</summary>

 [![map0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-08/scaled-1680-/map0-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-08/map0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![imgspot2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

В блоке «**Изображение с метками**» можно добавить:

- изображение
- метки
- подписи к меткам

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-"><summary>Добавление картинки</summary>

Чтобы добавить своё изображение, нажмите на черную полосу над картинкой и выберите нужный файл в проводнике.

[![imgspot3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B5%D1%82%D0%BE%D0%BA-%D0%A7%D1%82%D0%BE"><summary>Добавление меток</summary>

Чтобы добавить метки на изображение, достаточно просто нажать на него в любом месте.

[![imgspot4-spots.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot4-spots.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot4-spots.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D0%B8-%D0%A7"><summary>Добавление подписи</summary>

Чтобы добавить подпись к метке, нажмите на метку. Откроется окошко, где вы сможете ввести свой текст. Нажмите на метку ещё раз, чтобы закрыть окошко.

[![imgspot5-label.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot5-label.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot5-label.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B5%D1%82%D0%BA%D0%B8-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B"><summary>Удаление метки</summary>

Чтобы удалить метку, нажмите на неё, откроется окошко для текста. Справа от текста вы увидите значок «**Корзина**». Нажмите на него, чтобы удалить эту метку.

[![imgspot6-deletespot.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot6-deletespot.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot6-deletespot.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A8%D0%B8%D1%80%D0%B8%D0%BD%D0%B0-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%80%D0%B0-%D0%92%D1%8B-%D0%BC%D0%BE"><summary>Ширина маркера</summary>

Вы можете изменить ширина маркера. По умолчанию стоит "**Адаптивно**", это значит, что после ввода текста размер маркера адаптируется по объем и формат текста, будет или широким или узким.  
Так же вы можете самостоятельно поставить "**Узко**" или **"Широко"**

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-11/scaled-1680-/image.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-11/image.png)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

Вы можете настроить внешний вид меток. Можно выбрать:

- цвет метки
- иконку
- цвет иконки

Также в этом блоке вы можете ввести свой текст для подсказки к блоку.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%80%D0%BE%D0%B2-%D0%A7"><summary>Настройка меток</summary>

##### Цвет метки

Вы можете выбрать цвет для метки из **палитры**. Откройте выпадающее меню палитры: там вам будут доступны цвета из базовой палитры и те цвета, которые вы добавили самостоятельно.

<p class="callout info">Добавить свои цвета в палитру можно в настройках лонгрида. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).</p>

Также вы можете задать свой собственный цвет с помощью **HEX-кода**.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

[![imgspot7-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot7-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot7-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

##### Иконка

Вы можете выбрать иконку из встроенной базы иконок. И выбрать её цвет, а также задать свой собственный цвет с помощью **HEX-кода**.

[![imgspot8-icon.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot8-icon.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot8-icon.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для различных карт, схем, планов. Можно добавить схему и отметить на ней нужные объекты, одновременно показывая, как они выглядят и давая дополнительную информацию.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>