Выбор областей изображения в мастере jQuery

Question

Я создаю мастера (на самом деле, прославленный опрос), используя jQuery Wizard Redux.У меня есть несколько изображений (созданных в Illustrator), из которых я хочу, чтобы пользователь выбрал их, которые будут служить «отправкой» для каждого шага мастера.

например, эта карта мира, которую я сделал во FlashCatalyst .

(sidenote: я хочу, чтобы мастер отображался на ipad / iphone, поэтому на данный момент я уклоняюсь от Flash)

Возможно ли создать что-топодобное с использованием jQuery / Javascript?Некоторые регионы довольно сложны - например, раздел «Восточная Азия» на карте состоит из 6 различных невидимых прямоугольных кнопок, так что (почти) повсюду в черных регистры записываются как щелчок для «Восточной Азии».

В качестве альтернативы, есть ли какой-нибудь простой способ конвертировать мои файлы катализаторов флэш-памяти (которые закодированы в MXML) в javascript?

Answer 1

Вы можете использовать карту изображения , определив карту и элементы области (полилиния) для каждого региона.

---

обновление

Я бы создал прозрачные .png файлы с наложением ( каждый из которых содержит область ) и управлял бы их непрозрачностью при нажатии на элементы области.

• Вот небольшой инструмент, который я сделал, чтобы легко создать карту изображения ( дать coords от ваших кликов )
  http://jsfiddle.net/gaby/CKJwp/41/
• Вот демонстрационная страница, чтобы проверить карту изображения
  http://jsfiddle.net/gaby/8qgfS/29/

---

Обновление 2

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

<img src="..." id="..." rel="5" />

Теперь, поскольку мы добавляем класс selected-region для определения выбранной области, мы можем использовать jQuery для нацеливания изображения с этим классом и получения значения, хранящегося в его атрибуте rel.

поэтому, когда вы хотите, вы можете использовать var regionId = $('img.selected-region').attr('rel');

Answer 2

Вы также можете использовать тег HTML5 canvas для рисования самих элементов, и тогда каждый элемент (континент) будет доступен для щелчка точно на границах.

http://joncom.be/code/excanvas-world-map/