Как нанести метки на картинку

@dev3214 · Регистрация: 11.09.2021

Студворк — интернет-сервис помощи студентам

Как нанести метку(флажок) на каждое здание?
Аналог: яндекс(гугл) карты.

В будущем предполагается: пользователь кликает по флажку, а справа, в элементе `Col-3` отображается описание помещения.

Код: https://jsfiddle.net/User65659/obshuerL/63/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--
Источник -https://getbootstrap.com/docs/5.0/utilities/sizing/
-->
 
<head>
    <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>...</title>
 
  <!-- Bootstrap CSS (jsDelivr CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<!-- * **** **** **** **** **** *** BODY ** *** *** *** ***---->
<body>
<div class="container-fluid bg-primary">
<!-- * **** **** **** **** **** *** ROW ** *** *** *** ***---->
<div class="row"> 
  <div class="col-2 bg-primary"> 
  Col-1
  </div>
  <div class="col bg-success"> 
    Col-2
      <img src=" https://i.ibb.co/R9F9dV8/img1.png" class="mw-100" alt="Описание картинки">
<!-- <img src="https://i.ibb.co/sJ7jhXs/12-08-2022-09-28-33.png" class="mw-100" alt="Описание картинки">-->
    <!-- https://i.ibb.co/R9F9dV8/img1.png -->
    <!--https://i.ibb.co/sJ7jhXs/12-08-2022-09-28-33.png -->
    <!--https://i.ibb.co/92x8KbV/01.png -->
  </div>
  <div class="col-3 bg-danger"> 
  Col-3
  </div>
</div>
<!-- * **** **** **** **** **** *** ROW.END ** *** *** *** ***-->
</div>
</body>
<!-- * **** **** **** **** **** *** BODY.END ** *** *** *** ***---->

@Balanaar · 12.08.2022, 11:59

Если изображение фиксированного размера, можно банально разместить ваши метки в разметке, спозиционировать их абсолютно и задать им смещение top, left в css.

Добавлено через 40 секунд
В противном случае работаем с канвасом.

@dev3214 · 12.08.2022, 13:05 **[ТС]**

Сообщение от Balanaar

Если изображение фиксированного размера

Обновление-1
Сайт предполагается использовать на одном устройстве - 43 дюйма

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	12.08.2022, 11:59
	Если изображение фиксированного размера, можно банально разместить ваши метки в разметке, спозиционировать их абсолютно и задать им смещение `top`, `left` в css. Добавлено через 40 секунд В противном случае работаем с канвасом. 1