Как сделать выбор столика на схеме зала?

Question

[Сергей Волков]

Есть схема зала бара в виде картинки - надо разметить столики каким-то элементом и позволить пользователю выбрать столик, после чего номер столика передать дальше скрипту. Как-то пока не могу допетрить как лучше делать.

Answer 1

[Максим Тимофеев]

много вариантов, лучше наверное svg, на его фоне картинка зала, поверх столики, слушаем событие клика передаем номер, который в каком-нибудь data-id храним
Самый лишний тег в Вашем вопросе это html, тут больше svg + js.

Comments

[Сергей Волков]

Еще решение должно быть адаптивным.

[Максим Тимофеев]

Сергей Волков, именно поэтому

лучше наверное svg

Answer 2

[Сергей delphinpro]

Слушать клик на столике, получать его номер (номер можно записать в data-атрибуте) и передавать куда нужно.
Столики отрисовать как угодно. Хоть картинками, хоть svg схему сделать.

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

Answer 3

[Mikhail Kupriyanov]

Доброго дня.
Первый вариант, который приходит в голову: html image map со ссылками на скрипт с разными параметрами.
Второй подход: нарезать изображение на части и "сверстать" зал
Для третьего варианта нам понадобятся ключевые слова: svg, canvas, links (как сделать ссылку с canvas)

Возможно, вам поможет этот эксперимент