webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

Как лучше сделать интерактивную картинку?

Есть пара человечков, на них нарисованы органы. При ховере подсветка, при клике модалка с инфой.
Задача минимум - получить в js селекторы на них.
Задача максимум сделать, так что бы можно было редактировать в админке положение, картинку и т.д.
Картинки еще нет, но будет в таком стиле:
443f8d64159a4697910c3b72873592fd.jpg

Вижу несколько вариантов, прошу подсказать лучший, так как реального опыта в подобных задачах нет.

1. SVG вставить кодом. Сложно будет картинки сделать, но потом просто манипулировать и адаптив сделать.
2. Куча картинок - абсолютное позиционирование. Можно из админки добавлять фотки поверх, задавая отступы. С адаптивом хз, наверное придется помучаться.
3. Одна картинка все остальное в js писать вычисляя отступы от краев. С адаптивом ад наверное будет.
4. canvas? все не доходят руки разобраться, если удобно - напишите, буду разбираться.
  • Вопрос задан
  • 926 просмотров
Решения вопроса 2
@Skrolea
Ну я на svg делаю. Вам, кстати, пример на кодепене выложили
Ответ написан
HamSter007
@HamSter007
HTML/CSS верстальщик
пример на codepen

*переместила комментарий в ответ)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@senselessV7
Есть пара человечков, на них нарисованы органы. При ховере подсветка, при клике модалка с инфой.


Это для чего? Сайт по продаже органов? А это все легально?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы