Интерактивный карта

[gigi1988]

Мне нужно написать модуль заказ и бронирование билетов для сайта, который работает на WordPress. Т.е. есть концертный зал, нужно чтобы отображалась схема зала, а пользователь мог отметить интересующие его места в зрительном зале (при щелчке выделяются определенным цветом), а потом мог их заказать, либо забронировать. Соответственно забронированные или купленные места отображаются другими цветами. Я не имею больших навыков web программирования и пока не могу понять как реализовать именно интерактивную карту зрительного зала. Подскажите какими средствами можно это реализовать.

[ADSoft]

Средствами JS (JQuery), PHP, HTML.
смысл таков - визуализируете массив мест, каждому месту вешаете обработчик мыши - как нажали - аяксово вносим место в бд, а у клиента меняем цвет ... в целом вот так

[gigi1988]

Сообщение от ADSoft

Средствами JS (JQuery), PHP, HTML.
смысл таков - визуализируете массив мест, каждому месту вешаете обработчик мыши - как нажали - аяксово вносим место в бд, а у клиента меняем цвет ... в целом вот так

А по Jquery не посоветуете литературку? Ну чтобы было кратко и доходчиво написано

[ADSoft]

Google, Яндекс итд

[kpachbiu]

Google самая лучшая литература) Я к сессии по нему готовился))
Одно и тоже понятие можно найти в разных интепритациях, и сразу становиться понятно, что оно означает!

[Greek9000]

Как-то мне понадобилось сделать интерактивную карту районов моего города, так, что бы при наведении на заданный район он подсвечивался (и выполнялись кое-какие действия, но в данном случае это не важно).
Это было сделано при помощи тэгов 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-картами:

<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>

[Никки]

Сделайте как тут: http://www.cinemapark.ru/booking/start/2/95768/

Если чо, то JavaScript код можно посмотреть командой Вид - Исходный код