Кажется, лучший способ реализовать изображение здания в виде файла SVG с наложениями <polyline>. Таким образом, вы можете использовать селекторы CSS и иметь гораздо больший контроль над своими макетами. Вы можете использовать <a> внутри SVG, javascript, и т.д. c.
Я взял ваше изображение и загрузил его в Нарисуйте SVG , чтобы создать требуемый верхний этаж <polyline>. После локального сохранения чертежа DrawSVG я просто скопировал <polyline> в свой собственный файл SVG, который, как вы можете видеть, работает без каких-либо дополнительных HTML, и добавил немного CSS, чтобы выделить :hover.
Вы можете вставить этот SVG в себя html как если бы он был и <img>, это просто еще один тег (с преимуществами).
ОБНОВЛЕНИЕ
Пересмотрел исходный код, который я опубликовал, и заменил его полностью новым кодом. Код теперь представляет собой страницу HTML с использованием файла SVG с изображением OP и показывает, как использовать <a> с некоторым демонстрационным текстом на :hover (снова верхний этаж).
HTML страница также была сделана «отзывчивой» за счет использования математических формул в запросах CSS calc() и @media (go 'полноэкранная страница' и изменение размера браузера, также проверьте страницу на различных устройствах с помощью браузера Разработчик Инструменты , 'портретный' и 'альбомный' режим).
Объяснение математики можно найти в других ответах, которые я дал на SO:
Теперь вы создаете остальные этажи ....
/*
Visit below answers on Stackoverflow for an explanation
of the math used for responsive sizing of elements.
https://stackoverflow.com/a/62033317/2015909
https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body { font-size: 1rem }
[band] { display: flex; flex-flow: column wrap; align-content: center }
[padded="1"], [padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'Band padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
<body padded="0">
<div id="construction-site" band="padded">
<svg viewbox="0 0 1600 1200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.line { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer }
.polyline { fill : Red ; fill-opacity : 0 }
.floor-text { fill: Black; stroke: none; fill-opacity: 0;
cursor: default; pointer-events: none;
font-weight: bold; font-family: sans-serif;
/* responsive font using y = mx + b */
font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
}
.floor:hover>.line { fill-opacity: .4; stroke-opacity: .8 }
.floor:hover>.floor-text { fill-opacity: .7 }
</style>
<image href="https://i.imgur.com/0i4N0d3.jpg"/>
<a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
<polyline class="line polyline"
points="201.242,678.473 1121.43, 333.16 1370.24,
553.473 1387.74, 668.473 1127.49,
474.098 189.242, 753.473 202.242, 678.973"/>
<line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>
<text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
</a>
</svg>
</div>
</body>