Как сделать такой проект?

Question

[HelpMeeee]

Здравствуйте.
Есть карта гостиницы(обычная картинка jpg), нужно чтобы при нажатии на домики высвечивались подсказки. Есть два вопроса которые не могу решить. Как это реализовать чтобы при адаптации ничего не менялось и в общем хорошо работало?Как это интегрировать на тильду?

spoiler

Comments

[Максим]

как минимум SVG

[Александр]

не, как минимум <map> - htmlbook.ru/html/map

[sergski]

максимум <cavnas>

[HelpMeeee]

Александр, Хороший вариант, но как быть при адаптации?

[HelpMeeee]

Много Чего, Как он поможет?

[HelpMeeee]

sergski, Как он поможет?

[Максим]

HelpMeeee, отрисовать все в редакторе а всё остальное тоже самое как в html css js

[HelpMeeee]

Много Чего, Не совсем понял ответ

[HelpMeeee]

Вот пример реализации ecorancho.ru/map

[Максим]

HelpMeeee, https://codepen.io/topicstarter/pen/zYKebZJ - примерно так но можно и ваще заморочиться и сделать супер пупер то есть добавить checkbox и проверять активный ли он и только потом показывать информацию а при клике на другую область закрыть прошлую и ещё можно на каждый шейп поставить pattern c оформлением дома и ваще разукрасить эту всю штукенцию и ваще можно применить webGL какой не будь типа three.js где всё это будет с такими понтами что закачаешься .... именно по этому есть термин frontend который затрагивает кучу всяких технологий и вариантов и так далее в общем всё зависит от ваших навыков ...

именно фронтэнд боятся - потому что это очень сложно но реально - надо просто сесть и разбираться с этой канителью всей

[HelpMeeee]

Много Чего, Как быть при адаптации? Это получается каждый объект выводить надо в SVG.., а это не самый лучший вариант

[Максим]

HelpMeeee, при адаптации надо просто убрать width и всё, а по поводу каждого объекта то нужен типа json типа того

[acwartz]

HelpMeeee, ну что поделать, вы хотите вращать в 3D условную голову видя её и спереди, и сзади и по бокам. Однако фото плоское, в профиль. При любом растягивании/увеличении хоть куда - картинка будет гамно ибо не векторная графика, даже если сумеете налету пересчитывать координаты объектов.

[mashrapov]

HelpMeeee, так на том примере же просто блоки раскиданы с абсолютным позиционированием, почему бы не сделать также?

Answer 1

[Роман Якимчук]

Это изображение, его нельзя адаптировать без доп. решений, например:

1. Растягивать / сжимать при изменении размера страницы, но это неудобно на небольших девайсах
2. Работать с навигацией, т.е. сделать возможность навигации по изображению если оно не помещается на экране (наподобие карт)
3. Изменить логику под небольшие размеры экранов, написать отдельное решение

И в целом верно сказали, надо map, или svg.