Как реализовать выбор квартиры?

Question

[LOBBY GIRL]

Добрый день! Подскажите, как реализовать данный блок. Стоит задача: при клики на лупу выделяется квартира на схеме и справа выводятся данные о ней. Есть забронированные квартиры, у них значок не активный, так надо сделать все этажи. Всего 4 дома.
UPD: Можно это сделать с помощью SVG ?

Comments

[suazu]

Цены на квартиру явно не московские :)

Answer 1

[Дмитрий Ким]

На картинку-схему этажа (position:relative) наложить картинки-схемы отдельных квартир (position: absolute;display:none;).
На лупы навешать toggleClass для картинок-квартир. Характеристики можно хранить в data-атрибутах.

Comments

[LOBBY GIRL]

я боюсь что картинок получится очень много

[_ _]

Павел Горбунов: Используйте css-спрайты или SVG

Answer 2

[nikosias]

Попробуйте использовать тег map(https://webref.ru/html/map) Тогда не придется делать множество картинок.

Comments

[Фёдор Ананин]

ошибка 404 по ссылке

[nikosias]

Скобочка добовляется в ЮРЛ https://webref.ru/html/map