Насоветуют... Менять бэкграунды - забудьте. HTML area - тоже похоронить.
Берёте вашу картинку. Поверх зданий создаёте векторный путь (обводите здания).
Размечаете нарисованные пути как вам удобно, достаточно будет повесить класс для дальнейшей стилизации по ховеру + в дата-атрибуты значимую информацию для тултипа/клика/что там ещё.
<svg ...>
<path class="area" data-id="1" d="..." />
<path class="area" data-id="2" d="..." />
</svg>
Инлайните получившуюся конструкцию на страницу. Фон можно в отдельном элементе и карту поверх, можно прямо в SVG зашить - не суть важно.
По ховеру на путь - через CSS делаете ему полупрозрачную заливку, у вас судя по картинке сплошным цветом просто заполняется при наведении - самый простой вариант.
По клику на путь - достаёте его `data-id` и выводите какую-либо информацию.
Вот пример статьи, где описано более подробно.
https://css-tricks.com/svg-map-rollovers/
В конце интерактивный пример есть.
Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.
