Стоит задача создания карты-схемы территории. Карта представляет собой 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-скрипт. Возможно, Вы подскажите иную реализацию?