Creation of an interactive map of the building. What would be the most flexible option?

Question

css

Hi all!
It is necessary to lay it out
- in pure css
- without pseudo -elements
- so that when changing classes to html, you could change the color of the blocks
- and what is most interesting and terrible - the layout must be adaptive!
can someone help solve this problem, despite the fact that the picture was given not psd in jpeg

Answer 1

svg + Raphael.js
Colors will change not through changing classes, but with the help of js
But adaptability here, of course, is bypassed.
At 320px, you can’t really get into these squares with your finger.
There was a situation when tables created in vizivig were present on the adaptive site, and the available methods for adapting the tables were not suitable.
In the end, I made the minimum width for the table block something around 720, and wrapped it in a block with horizontal scrolling.
It turned out that the site is adaptive, everything is as it should be, and the table can be viewed with an easy swipe.

Answer 2

For such things there is svg.
You can trace jpeg to svg via https://inkscape.org/en/

Answer 3

Here are articles to help you get the job done:
HTML and SVG: Creating an Interactive Map
Building an Interactive Map with Raphaël
Dynamic Geo Maps with SVG and jQuery

Answer 4

A good and modern option is SVG, which is what I advise you. It would be possible to make images and activate the ones you need when hovering over area , if you had the opportunity to cut it into images, but you don't seem to have a PSD file.
But I would choose SVG solution. SVGs can be manipulated with CSS (responsiveness is needed), and elements within SVGs can respond to :hover with CSS just as easily as html elements.

Answer 5

on pure css, without pseudo-elements, so that when changing classes on html, you could change the color of the blocks

Are pseudo-elements no longer pure CSS, or will it be impossible to change the color with a class?
If I were you, I would refuse if your stupid conditions stand. If you just need such a page - I somehow use fabric.js for one project, it draws on canvas

Answer 6

The task is tedious but not impossible. Use transforms, border-radius and layout like a regular layout. Here you can immediately see two blocks, upper and lower. The upper one is divided into left and right, and so on ...
It's not entirely clear what "adaptive" means in this case. I think you should check with whoever you're doing it to.

Answer 7

babylon.js - and in general in 3d you can stir up

Answer 8

Here is an example of how it can be done https://www.youtube.com/watch?time_continue=1131&v...