|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
18.12.2010, 13:18 | #1 |
Регистрация: 13.10.2009
Сообщений: 8
|
Интерактивный карта
Мне нужно написать модуль заказ и бронирование билетов для сайта, который работает на WordPress. Т.е. есть концертный зал, нужно чтобы отображалась схема зала, а пользователь мог отметить интересующие его места в зрительном зале (при щелчке выделяются определенным цветом), а потом мог их заказать, либо забронировать. Соответственно забронированные или купленные места отображаются другими цветами. Я не имею больших навыков web программирования и пока не могу понять как реализовать именно интерактивную карту зрительного зала. Подскажите какими средствами можно это реализовать.
|
18.12.2010, 13:21 | #2 |
Старожил
Регистрация: 25.02.2007
Сообщений: 4,160
|
Средствами JS (JQuery), PHP, HTML.
смысл таков - визуализируете массив мест, каждому месту вешаете обработчик мыши - как нажали - аяксово вносим место в бд, а у клиента меняем цвет ... в целом вот так |
18.12.2010, 13:30 | #3 |
Регистрация: 13.10.2009
Сообщений: 8
|
А по Jquery не посоветуете литературку? Ну чтобы было кратко и доходчиво написано
|
18.12.2010, 14:07 | #4 |
Старожил
Регистрация: 25.02.2007
Сообщений: 4,160
|
Google, Яндекс итд
|
18.12.2010, 15:35 | #5 |
взагрузке.рф
Форумчанин
Регистрация: 13.06.2010
Сообщений: 117
|
Google самая лучшая литература) Я к сессии по нему готовился))
Одно и тоже понятие можно найти в разных интепритациях, и сразу становиться понятно, что оно означает!
Взагрузке.рф - Файлы для людей
Ищу художника или веб-дизайнера для создания браузерной онлайн игры! icq 340-289-851 |
29.12.2010, 13:31 | #6 |
Форумчанин
Регистрация: 01.09.2009
Сообщений: 151
|
Как-то мне понадобилось сделать интерактивную карту районов моего города, так, что бы при наведении на заданный район он подсвечивался (и выполнялись кое-какие действия, но в данном случае это не важно).
Это было сделано при помощи тэгов map и area. Тэг map - это векторная карта, который содержит теги area, которые представляют полигоны, прямоугольники или эллипсы. Тонкости работы с ними описывать не буду, т.к. найти их будет не сложно, а лучше у меня не получится ). Лучше опишу, как я делал карту. 1. Сначала я нарисовал растровую картинку нужного размера с изображением районов. 2. В CorelDraw создал документ, по размером точно совпадающий с полученным изображением и обвёл контуры районов. 3. Преобразовал все фигуры в полигоны (многоугольники без скруглённых углов). Это надо затем, что бы Корел сохранял данные в тэги polygon, с указанием абсолютных значений координат. 4. Дал уникальное название каждому полигону, что бы можно было их отличить друг от друга. 5. Сохранил нарисованный файл с границами областей в формат SVG. В итоге получился SVG-файл, который можно открыть в любом текстовом редакторе, где каждому району соответствует свой тэг polygon. И у каждого тэга есть аттрибут points, который содержит точки почти в нужном формате. Отличия заключаются в том, что в SVG после каждой X-координаты идёт запятая, а после Y-координаты пробел, тогда как в HTML (<area coords>) все значения разделены запятыми. Поэтому мне пришлось побыстрому накатать программку, которая преобразует строку с SVG-координатами в HTML-координаты. Естественно, для рисования не обязательно использовать CorelDraw, а взять любой другой подходящий SVG-редактор (напр. Incscape). Надеюсь, что объяснение не очень сбивчивое. Удачи! Пример работы с html-картами: Код HTML:
<map name="Navigation"> <area id="studgorodok" href="#" title="Студгородок" alt="Студгородок" shape="poly" class="{strokeColor:'000000', strokeWidth:1, fillColor:'ff0000', fillOpacity:0.6}" coords="99, 135, 95, 131, 95, 130, 92, 125, 88, 117, 87, 115, 92, 113, 94, 110, 97, 114, 108, 105, 109, 104, 114, 100, 115, 101, 117, 98, 116, 97, 131, 85, 139, 86, 140, 88, 141, 89, 144, 91, 151, 94, 154, 95, 154, 96, 155, 97, 156, 97, 156, 98, 155, 98, 155, 99, 156, 100, 156, 101, 156, 101, 157, 103, 157, 104, 158, 105, 160, 107, 163, 112, 163, 115, 163, 118, 162, 120, 160, 123, 159, 126, 157, 127, 154, 129, 145, 134, 142, 135, 139, 136, 137, 136, 130, 137, 116, 139, 109, 139, 106, 138, 103, 136, 102, 135, 102, 135, 100, 135"></area> <area id="mirny" href="#" title="Мирный" alt="Мирный" shape="poly" class="{strokeColor:'000000', strokeWidth:1, fillColor:'ff0000', fillOpacity:0.6}" coords="82, 85, 80, 82, 80, 81, 79, 81, 79, 81, 79, 80, 78, 80, 78, 80, 77, 80, 77, 80, 74, 77, 72, 74, 72, 74, 72, 71, 72, 70, 72, 68, 71, 68, 70, 66, 70, 66, 70, 66, 70, 66, 71, 66, 71, 65, 84, 58, 84, 58, 83, 56, 82, 52, 83, 51, 84, 50, 85, 50, 87, 48, 87, 48, 88, 49, 89, 50, 90, 51, 91, 52, 92, 51, 96, 55, 99, 59, 105, 65, 104, 66, 127, 88, 116, 97, 117, 98, 115, 101, 114, 100, 112, 101, 110, 103, 109, 104, 108, 105, 104, 108, 97, 114, 94, 110, 92, 113, 87, 115, 86, 113, 80, 107, 78, 105, 81, 102, 84, 99, 86, 93, 85, 92, 84, 90, 85, 89, 83, 87, 83, 87, 83, 86"></area> <area id="promzona" href="#" title="Промзона" alt="Промзона" shape="poly" class="{strokeColor:'000000', strokeWidth:1, fillColor:'ff0000', fillOpacity:0.6}" coords="99, 59, 96, 55, 92, 51, 95, 49, 96, 48, 99, 46, 102, 39, 105, 31, 112, 34, 115, 34, 116, 31, 120, 31, 124, 36, 123, 37, 124, 38, 125, 39, 125, 40, 125, 41, 132, 44, 134, 44, 136, 45, 135, 50, 136, 58, 144, 58, 154, 58, 158, 59, 160, 60, 162, 63, 163, 64, 165, 73, 165, 73, 166, 75, 166, 76, 166, 77, 166, 77, 166, 79, 165, 82, 165, 83, 165, 83, 165, 84, 166, 84, 166, 85, 166, 86, 167, 87, 167, 88, 166, 90, 165, 90, 165, 90, 165, 91, 165, 91, 164, 92, 163, 93, 163, 93, 162, 94, 161, 95, 161, 95, 160, 95, 159, 95, 158, 96, 158, 96, 157, 96, 156, 97, 156, 97, 155, 97, 154, 96, 154, 95, 151, 94, 144, 91, 141, 89, 140, 88, 139, 86, 131, 85, 127, 88, 126, 88, 115, 77, 109, 71, 104, 66, 105, 65"></area> ... </map> |
29.12.2010, 17:12 | #7 |
Форумчанин Подтвердите свой е-майл
Регистрация: 20.11.2007
Сообщений: 500
|
Сделайте как тут: http://www.cinemapark.ru/booking/start/2/95768/
Если чо, то JavaScript код можно посмотреть командой Вид - Исходный код |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Интерактивный генератор текстов | 095 | Общие вопросы Delphi | 5 | 15.03.2010 10:09 |
Интерактивный дизассемблер | valerij | Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM | 0 | 23.12.2009 02:41 |
Карта C++ | mutabor | Свободное общение | 6 | 15.06.2009 23:36 |
сделать интерактивный тест чтоб по локальной сети его проходили сразу несколько человек | CheGuevera | БД в Delphi | 4 | 10.06.2008 19:21 |
Интерактивный интерфейс!? | grevis | HTML и CSS | 5 | 10.09.2007 14:48 |