Как сделать такой проект?

Question

Есть карта гостиницы(обычная картинка jpg), нужно чтобы при нажатии на домики высвечивались подсказки. Есть два вопроса которые не могу решить. Как это реализовать чтобы при адаптации ничего не менялось и в общем хорошо работало?Как это интегрировать на тильду?

Вот сайт, где смогли реализовать - ecorancho.ru/map

https://i.imgur.com/NX6L1mx.jpg cама карта

Answer 1

Вот вам один из вариантов такой реализации. Всё выполнено в процентном соотношении. Небольшая погрешность (сдвиг элементов) при уменьшении размера окна есть, но она практически незаметна, и то, если только внимательно всматриваться. Сделано на скорую руку. Ничего сложного в этом нет, думаю, дальше вы самостоятельно справитесь с поставленной задачей. С меня на этом всё, учитывая, что в вашем вопросе полностью отсутствуют какие-либо попытки и ваш вопрос по этой причине уверенно двигается к закрытию. Успехов!

.img {
  position: relative;
  overflow: hidden;
  height: auto;
  width: 100%;
  max-width: 4810px;
}

img {
  height: auto;
  max-width: 100%;
}

.dot {
  position: absolute;
  width: 1%;
  height: 2%;
  background-color: white;
  border: 3px solid blue;
  cursor: pointer;
}

#dot1 {
  top: 52%;
  left: 27%;
}

#dot2 {
  bottom: 35%;
  left: 44%;
}

#dot3 {
  top: 24%;
  left: 43%;
}

.dot span {
  content: "";
  display: block;
  position: absolute;
  bottom: 32px;
  right: -2px;
  padding: 1px 5px;
  background-color: blue;
  color: white;
  white-space: nowrap;
  font-family: monospace;
  opacity: 0;
}

.dot span:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 2px;
  height: 30px;
  background-color: blue;
}

.dot:hover span {
  opacity: 1;
}

<div class="img"><img src="https://i.imgur.com/NX6L1mx.jpg">
  <div id="dot1" class="dot"><span>Подсказка 1</span></div>
  <div id="dot2" class="dot"><span>Подсказка 2</span></div>
  <div id="dot3" class="dot"><span>Подсказка 3</span></div>
</div>

БЛОГ НА HUSL

Как сделать такой проект?

Ответы (1 шт):