アニメーションワールドマップを作成する方法、あなたが上に乗ると、大陸が強調表示され、選択された国のポップアップが表示されます。

Question

あなたが上に乗ると、大陸が選択され、 http://ilfc.com/customers.htm Ajax、jQuery、またはフラッシュコード化されたマップをダウンロードするためのソースがありますか。どのような技術を使用するのが最適でしょうか？

Answer 1

私はこれまでにこのようなことをしており、以下の技術を使用しました。

まず、画像が必要です。世界地図と同じ解像度で各強調表示された国のグラフィックとグラフィック。強調表示されている国は、世界地図と同じ位置になければなりません！最後の画像は空白です。

ここで、国の形を含むイメージマップを作成します。

次のステップでは、3つの「レイヤー」を作成し、それらのレイヤーを重ねて配置します。背景のレイヤーは世界地図を表示します。 2番目に強調表示された国が表示されます。一番上には空白のイメージとイメージマップを使います。あなたがqtipを使用することができますポップアップのために

$(document).ready(function() { 
    $('#idoftheimagemap area').each(function() { 
     $(this).hover(
      function() { 
       //assuming it is an image 
       $('#idofthehighlightlayer').attr('src', 'images/' + $(this).attr('id') + '.png'); 
      }, 
      function() { 
       $('#idofthehighlightlayer').attr('src', 'images/blank.png'); 
      } 
     ); 
    }); 
}); 

：イメージマップの各領域はidと国の名前を持っている、あなたはjqueryのベースのスクリプト次使用することができますと仮定。

Answer 2

ブラウザにまたがって動作する一連のJavascript Webマッピングパッケージがあり、このようなことをさせることができます。 OpenLayersを試してください。リージョン境界をGMLやその他のサポートされているフォーマットにして、ハイライトとハンドラを記述するだけです。

www.openlayers.org