Создание интерактивной карты здания. Каков будет наиболее гибкий вариант?

Question

[sutkin main]

Привет всем!
Необходимо сверстать это
- на чистом css
- без псевдоэлементов
- чтоб при изменении классов на html можно было бы поменять цвет блоков
- и что самое интересное и ужасное - верстка должна быть адаптивной!

может кто поможет решить эту проблемку, при том что картинку дали не psd на в jpeg

Answer 1

[Андрей Хохлов]

svg + Raphael.js
Цвета будут меняться не через смену классов, а с помощью js
А вот адаптивность тут конечно мимо.
На 320px там пальцем то не особо попадешь в эти квадратики.

Была ситуация, когда на адаптивном сайте присутствовали таблицы, создаваемые в визивиге, и имеющиеся приемы адаптивность таблиц не подходили.
В итоге я сделал минимальную ширину для блока таблицы что-то в районе 720, и обернул его в блок с горизонтальной прокруткой.
Получилось, что сайт адаптивный, все как надо, а таблицу можно рассмотреть легким свайпом.

Comments

[keslo]

Также и в Bootstrap кажется сделано.

Answer 2

[Александр Таратин]

Для таких вещей есть svg.
Можно оттрасировать jpeg в svg через https://inkscape.org/en/

Comments

[sutkin main]

если его прорисовать на svg То потом как с ним будет работать программист, которому нужно сделать блоки динамическими???0-0

[Александр Таратин]

kapko main: Как и с обычными dom элементами. Как-то в стиле document.querySelector('svg path').fill = "red"

Answer 3

[Илья Ерофеев]

Вот статьи, которые помогут справиться с задачей:
HTML и SVG: создаём интерактивную карту
Построение интерактивной карты с Raphaël
Dynamic Geo Maps with SVG and jQuery

Answer 4

[Александр Зим]

Хороший и современный вариант - SVG, что я тебе и советую. Можно было бы сделать изображениями и активировать нужные при наводе на area, если бы у тебя была возможность порезать это на изображения, но у тебя кажется нет PSD файла.

Но я бы выбрал SVG решение. SVG можно манипулировать при помощи CSS (адаптивность же нужна) и элементы внутри SVG смогут реагировать на :hover при помощи CSS также просто, как и html элементы.

Answer 5

[Назар Мокринский]

на чистом css, без псевдоэлементов, чтоб при изменении классов на html можно было бы поменять цвет блоков

А псевдоэлементы уже не чистый CSS или классом невозможно будет изменить цвет?
Я бы на вашем месте отказался если стоят ваши глупые условия. Если просто нужна такая страничка - я пользоватся как-то fabric.js для одного проекта, он на canvas рисует

Comments

[sutkin main]

отказать не могу

[Назар Мокринский]

kapko main: Тогда только призывать к здравому смыслу. "без псевдоэлементов" - это бред и дичь редчайшая, а не условие задачи. Спрашивал тут один вчера, как в SQL найти соответствие не используя ни "LIKE", ни "=" - вот ваш вопрос из той же оперы.

Answer 6

[tef]

Задача муторная но не невыполнимая. Используйте трансформации, бордер-радиус и верстайте, как обычный макет. Тут сразу видно два блока, верхний и нижний. Верхний делится на левый и правый и тд...

Не совсем понятно, что значит в этом случае "адаптивный". Думаю, вам стоит уточнить у того, кому делаете.

Answer 7

[cybervito21]

babylon.js - и вообще в 3d можно замутить

Answer 8

[Dvoeglazov]

Вот пример, как это можно сверстать https://www.youtube.com/watch?time_continue=1131&v...