Как бы вы сверстали такой блок?

Question

[Марти Макфлай]

Интересно услышать мнения, как бы кто сверстал такую штуку:


Нужно, чтобы каждая комната подсвечивалась при наведении, причём как на основном изображении, так и на миникарте.
Само это изображение в svg, для каждой комнаты отрисован активный и неактивный вариант.

Comments

[v3shin]

Я бы закинул все в родительский элемент и при наведении на комнату менял бы его какой-нибудь data-атрибут. Ну и в css привязался бы к этому data-атрибуту.

[Absolute138]

Наложить активный и неактивный элемент др.на друга и менять в :hover z-index или opacity

Answer 1

[xmoonlight]

Канвас с изометрической сеткой и со спрайтами-ромбами (+окошко общего плана в уголке).

Answer 2

[Артём Ведищев]

Мой вариант
https://jsfiddle.net/3aqosypj/

Comments

[Марти Макфлай]

Это вы представляете сколько всего нужно подсвечивать? У меня то не просто эллипс и прямоугольник.

[Артём Ведищев]

для каждой комнаты отрисован активный и неактивный вариант

надо смотреть как отрисовано

[Артём Ведищев]

Это мое понимание принципа выделения по наведению