Выбор областей изображения в мастере jQuery
Я создаю мастера (на самом деле, прославленный опрос), используя jQuery Wizard Redux. У меня есть несколько изображений (созданных в Illustrator), из которых я хочу выбрать пользователя, которые будут действовать как их "представление" для каждого шага мастера.
например, эту карту мира, которую я сделал во Flash Catalyst.
(sidenote: я хочу, чтобы мастер был доступен для просмотра на ipad/iphone, поэтому сейчас я ухожу от Flash)
Можно ли создать что-то подобное, используя jQuery/Javascript? Некоторые регионы довольно сложны - например, раздел "Восточная Азия" на карте состоит из 6 различных невидимых прямоугольных кнопок, так что (почти) повсюду в черных регистры регистрируются как щелчок по "Восточной Азии".
В качестве альтернативы, есть ли какой-нибудь простой способ конвертировать мои файлы flash катализаторов (которые закодированы в MXML) в javascript?
2 ответа
Вы можете использовать карту изображения, определив карту и элементы области (полилинии) для каждого региона.
Обновить
Я бы создал прозрачный .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');
Вы также можете использовать HTML5 canvas тег, чтобы нарисовать сами элементы, и тогда каждый элемент (континент) будет доступен для нажатия точно на границах.