Как оживить картинку?
Насоветуют... Менять бэкграунды - забудьте. 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/
В конце интерактивный пример есть. 
Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.
я бы отслеживал позицию курсора и просто менял бы бэкграунд на картинку, где дом подсвечен. Но наверное это слишком ресурсоемко