KonstRuctor
@KonstRuctor
программист, дизайнер, фотограф, журналист

Как раскрасить столики в кафе?

Задача – динамически показывать на сайте состояние тех или иных объектов, например столиков в кафе, стендов на выставке или других подобных вещей. Рисуем простенькую схему, создаем для нее imagemap: jsfiddle.net/KonstRuctor/wvwc9/
Статусами столиков рулит администратор из своей панели, статус пишется в базу.
Я придумал такой вариант –
1) Нарисовать прозрачные гифы (или png) со столиками, каждый в трех цветовых вариантах (занят, свободен, бронь)
2) С помощью css позиционировать нужную картинку каждого столика поверх основной схемы всего кафе, картинка с нужным цветом столика выбирается php согласно статусу, это сделать элементарно.
Вопрос такой – есть ли более простое решение, без рисования кучи картинок, например на css или jquery?
Я нашел только плагины со всевозможными hover-эффектами…
  • Вопрос задан
  • 2939 просмотров
Пригласить эксперта
Ответы на вопрос 6
@igoravr
Можно использовать Raphaël. Быстро и удобно можно делать различные планы или небольшие карты. Заранее можно всё подготовить в вектором графическом редакторе.
Ответ написан
Sergei_Erjemin
@Sergei_Erjemin
Улыбайся, будь самураем...
Э… ну раз «раскрасить столики в кафе» то решения прямолинейно как луч света! Прост покрасить их разными цыетами в реале. Далее се просто «Ваш столик „Зеленый в желтый горошек“ в „Красном зале“… :)
Ответ написан
avalak
@avalak
Сомневаюсь что это будет проще, но ещё есть вариант с canvas. Мне очень понравился калькулятор скилов из Path Of Exile. Правда реализовывать придётся самому.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Если это квадраты — просто див с определенным цветом и прозрачностью навесить над столиком. Это из простых вариантов. Если столики имеют текстуру — нужен спрайт. Если столиков больше тысячи (в чем я сомневаюсь) то это уже надо на канвас переложить.
Ответ написан
wilelf
@wilelf
SEO, музыка, веб-аналитика
Можно и не красить, а помечать иконками «забронирован», «свободен», «скоро освободится».
Ответ написан
KonstRuctor
@KonstRuctor Автор вопроса
программист, дизайнер, фотограф, журналист
Благодарю за идеи, коллеги!
Столиков немного, поэтому пока сделал изображениями.
Первое – самое большое – схема кафе, где обозначены постоянные элементы (стойка бара и т.п.);
Второе – столики: прозрачные гифы, для каждого столика три цветовых решения.
Сделал позиционирование каждого столика на CSS относительно схемы.
Ну и меняю картинки в зависимости от статуса.
Минус данного подхода: передвинули столик в реале – переделываем кучу картинок, переписываем CSS на сайте, что заказчику самостоятельно не сделать.
Ответ написан
Ваш ответ на вопрос

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

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