1

jQuery Wizard Redux を使用してウィザード (実際には、栄光の調査) を作成しています。ユーザーに選択してもらいたいいくつかの画像(Illustratorで作成)があり、ウィザードの各ステップの「提出」として機能します。

たとえば、この世界地図は Flash Catalyst で作成しました

(補足: ウィザードを ipad/iphone で表示できるようにしたいので、現時点では Flash を避けています)

jQuery/Javascriptを使用して同様のものを作成することは可能ですか? 一部の地域は非常に複雑です。たとえば、マップの「東アジア」セクションは 6 つの異なる非表示の長方形のボタンで構成されているため、(ほぼ) どこでも黒で「東アジア」のクリックとして登録されます。

または、Flash Catalyst ファイル (MXML でコード化されている) を JavaScript に変換する簡単な方法はありますか?

4

2 に答える 2

3

各地域の地図とエリア要素(ポリライン)を定義することで、画像地図を使用できます。


アップデート

.pngオーバーレイされる透明なファイル(それぞれが領域を保持する)を作成し、領域要素をクリックしたときの不透明度を制御します。


アップデート2

リージョン画像の属性を使用して、rel次のような値を保存できます。

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

ここで、selected-region選択した領域を定義するクラスを追加するので、jQueryを使用してそのクラスで画像をターゲットにし、そのrel属性に格納されている値を取得できます。

だからあなたがそれを望むときにあなたはそれを使うことができますvar regionId = $('img.selected-region').attr('rel');

于 2010-12-28T13:36:22.560 に答える
0

また、HTML5canvasタグを使用して要素自体を描画すると、各要素 (大陸) が境界上で正確にクリック可能になります。

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

于 2010-12-28T22:24:30.340 に答える