2011-07-25 6 views
0

ユーザーが指定した番号を入力したときに画像/マップ上の特定の場所をマークすることを目的とした、単純なWebアプリケーションプロジェクトを開始したいと考えています。クライアントサイドスクリプティングを使用したインタラクティブマップ

たとえば、ドキュメントに米国地図があり、その下にテキストフィールドフォームがあるとします。ユーザーが入力(5)すると、カリフォルニア州がハイライトされます。

マウスオーバーでも同様の手法が行われています。しかし、JS、JQ、CSS、HTMLでの私のスキルは、最大限の「再考」です。私が今説明したシナリオは可能ですか?すべてのガイドポイント/ヒント/ヒントは非常に高く評価されています。

は、あなたのマップが、これは簡単で、JavaScriptとHTMLで作成されたと仮定すると、あなたに

答えて

0

ありがとうございます。テキストフォームを検証して、各地域がユーザーが入力すると予想されるものとリンクするようにする必要があります。たとえば、ユーザーが(5)を入力すると、マップ上のカリフォルニア地域のID(「カリフォルニア」など)にリンクします。

ので、これらの期待にハッシュを作る:

linkedArray = new Array(); linkedArray['5'] = "california";

などなど

その後、その配列に対するあなたのテキストボックスの値をチェックし、の背景色を変更するCSSクラスを持っていますあなたのマップに必要な要素を追加し、そのクラスを要素に追加するだけでなく、その要素をボックスに入力します。あなただけまっすぐJPEG形式のマップを持っている場合は

for var i in linkedArray{ if linkedArray[i] == $("yourTextbox").val() { $('"' + linkedArray[i] + '"').addClass("highlighted"); } }

これははるかに複雑になります。

関連する問題