@Vit632

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

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

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

Сайт будет отображаться на одном устройстве - 43 дюйма.

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

spoiler--Код.HTML. Дублирую из jsfiddle.net.

<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 ** *** *** *** ***---->



62f5f692cb182701009192.png
62f5f7793bc56517639190.png
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
если хочешь, чтобы оно работало адаптивно и пропорционально масштабировались твои маркеры с изображением - то только через svg.
p.s. картинку в svg загнать тоже можно
Ответ написан
@cssfish
Плохое знание основ - причина больших бед
1) делаем блок с фиксированным соотношением сторон (ratio), равным соотношению сторон картинки
2) картинку внутрь, на 100% по ширине и высоте
3) блоку relative
4) метки делаем например как блоки с фоном. тоже с фикс соотношением сторон. Ширину прописываем как % от общего блока
5) каждой дополнительно даем свое имя или модификатор. Расставляем как abs блоки, позиционируя через %
6) соотв-но вешаем js который по клику выводим справа нужный текст (сравнивая с именем/модом/дата-атрибутом данного флажка)

если все это неясно то проще заказать разработку
размер устройства в дюймах тут вообще не важен
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы