0

Стоит задача создания карты-схемы территории. Карта представляет собой png-файл, на котором нарисованы здания. Каждое здание имеет отдельную картинку (тоже самое здание, которое подсвечено и обладает булавкой с номером здания). Нужно , чтобы при наведении на здание появлялась данная картинка. Думаю реализовать так: разместить поверх карты-картинки над каждым зданием div-блоки, при наведении на div-блок показывать картинку здания. Проблема в том, что сами блоки и картинки здания нужно "скейлить" в зависимости от размера окна. Сейчас размещаю так:

    <div class="SchemeTerritoryImage">
        <img src="map2.png" class="img-fluid" alt="">
        <a href="#" id="sklad17" style="position: absolute; left: 16%; top: 64%;"><img src="17.png" class="img-fluid"></a> 
    </div>

В css-файле:

    .SchemeTerritoryImage {  
    margin: 40px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    position: absolute;
    }

Размещение объектов вроде понял, как сделать. А как изменять размер div-блоков и img, не знаю, возможно через js-скрипт. Возможно, Вы подскажите иную реализацию?

6
  • Приложите ваш код в виде рабочего сниппета, который можно запустить и посмотреть.
    – user298256
    30 июл 2019 в 9:31
  • а какая зависимость от родителя? .SchemeTerritoryImage - от него надо скейлить? или от размера окна все таки?
    – Skywave
    30 июл 2019 в 10:15
  • Для такого все же более уместно будет использовать canvas или svg. 30 июл 2019 в 10:30
  • @Skywave скорее от родителя, а он сам скейлится от размера окна. С картинками проблему решил, теперь картинки со зданием равны по размеру с картинкой-схемой, просто содержат прозрачный фон и само здание в правильном расположении. Осталось решить проблему с div-блоками и их изменением размера.
    – Wolfed
    30 июл 2019 в 10:52
  • @StepanKasyanenko согласен полностью с Вами. SVG - идеальное решение, но картинка в png и перерисовывать отказываются.
    – Wolfed
    30 июл 2019 в 10:52

1 ответ 1

1

Я в качестве ознакомления сделал этот пример Выделил при hover два элемента(ноутбук и лист бумаги) и повесил события Ну в общем смотрите пример

Может быть img сюда не прогрузится : https://codepen.io/topicstarter/pen/VobZqa

img{
  display: block;
  max-width: 100%;
}

.items{
  width: 640px;
  margin: 30px auto;
  position: relative;
}

.item-svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

#laptop,#paper{
  fill: transparent;
  cursor: pointer;
}

#paper:hover,
#laptop:hover{
  fill: rgba(255,0,0,0.4);
}

#t1{
  fill: #fff;
  font-size: 14px;
  
}

.hover{
  transform: translate(100px, 0);
  opacity: 0;
  transition: 0.34s;
}

#border{
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
}

.els:hover .hover{
  transform: translate(0, 0);
  opacity: 1;
}
<div class="items">
  <div class="item-img">
    <img src="https://img1.goodfon.ru/original/3399x2163/b/15/biblioteka-polki-knigi.jpg" alt="">
  </div>
  <div class="item-svg">
    <svg width="640" height="405" xmlns="http://www.w3.org/2000/svg">
      <g class="els">
        <title>Laptop</title>
        <g class="hover">
        <text x="150" y="150" id="t1">Это такой крутой Ноутбук</text>
        <rect id="border" x="125" y="125" width="200" height="40" rx="10"></rect>
        </g>
        <path d="M70,182 220,183 230,270 260,283 77,297 73,280z" id="laptop">
       
      </g>
        <g>
          <title>List</title>
          <path d="M237,315 370,315 400,370 205,372z" id="paper"/>
        </g>
    </svg>
  </div>
</div>

2
  • А что на счет измнения размера картинки? Кажется, в вопросе был упор именно на это. А как изменять размер div-блоков и img 1 авг 2019 в 12:12
  • @StepanKasyanenko я не понял не много - автор согласился с такой реализацией 1 авг 2019 в 12:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.