@aljo222
Учусь верстке

Как сделать кликабельную svg-картинку с подсказками?

Здравствуйте!

Потребовалось сделать на сайте такой функционал:
61eb9e96ea95f160044667.jpeg

Это svg-картинка, на которой каждая из круглых иконок - кликабельная. По клику показывается над иконкой подсказка.

Подскажите пожалуйста, о чем мне нужно почитать, чтобы понять как такое реализовывается?
Заранее спасибо
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
Я сделал только одну иконку и один клик : https://codepen.io/topicstarter/pen/KKXOaXo
В вашем случае надо нарисовать облачко и расположить текст выше облачка и вообще сделать всю иерархию
Ну а после работают обычные правила как и в css так и в javascript
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@402d
начинал с бейсика на УКНЦ в 1988
по старинке htmlbook.ru/html/map если у картинки будут фиксированные размеры и вас устроит, что зоны клика квадратные.

или https://developer.mozilla.org/en-US/docs/Web/SVG/A...
неплохой процент поддерживаемости
https://caniuse.com/?search=svg%20href
не будет работать в китае и у гиков на андроиде
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 мая 2022, в 11:22
3000 руб./за проект
26 мая 2022, в 10:41
2000 руб./в час
26 мая 2022, в 10:22
3900 руб./за проект