web-dev-qa-db-ja.com

SVG、HTML / CSS、ImageMapを使用して、クリック可能な州/州でマップを作成します

ユーザーがマップ内の異なる州をクリックして、その州に固有の情報を取得できるインタラクティブなマップを作成しようとしています。

例： http://www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

これまでのところ、機能が限られているソリューションしか見つかりませんでした。 SVGファイルを使用してこれを実際に検索しただけですが、可能であれば他の種類のファイルを開くことができます。

これを行うための完全に機能する方法（jQueryプラグイン、PHPスクリプト、ベクター画像）または手動で行う方法のチュートリアルを知っている人は、共有してください。

svgmappingimagemapjquery-svg
30
mindtheGaspar

イメージマップを装飾するためのjQueryプラグイン（ハイライト、選択領域、ツールチップ）：

http://www.outsharked.com/imagemapster/

開示：私はそれを書きました。

43
Jamie Treworgy

シンプルなイメージマップが必要なようですが、必要以上に複雑にしないことをお勧めします。ここに svgでイメージマップを改善する方法 の記事があります。 svg自体でクリック可能な領域を作成するのは非常に簡単です。クリック可能にする図形の周りに<a>要素を追加するだけです。

より高度なものが必要な場合のいくつかのオプション：

21
Erik Dahlström

私の答えを2つの部分に分ける方が良いと思います：

[〜＃〜] a [〜＃〜]-すべてをゼロから作成（SVG、JavaScript、およびHTML5を使用）：

  1. 新しいHTML5ページを作成する
  2. 新しいSVGファイルを作成します。各クリック可能な領域（州）は、SVGファイル内の個別のSVGポリゴンである必要があります（SVGファイルの作成にはAdobe Illustratorを使用していますが、たとえば Inkscape ）
  3. マウスオーバーとクリックイベントを1つずつポリゴンに追加します
    <polygon points="200,10 250,190 160,210" style="fill:Lime;stroke:purple;stroke-width:1" 
    onmouseover="mouseOverHandler(evt)"
    onclick="clickHandler(evt)" />
  4. JavaScriptコードの各イベントにハンドラーを追加し、目的のコードをハンドラーに追加します
    function mouseOverHandler(evt) {};
function clickHandler(evt) {};
  5. HTMLページにSVGファイルを追加します（インラインSVGが望ましいですが、リンクされたSVGファイルも使用できます）
  6. ファイルをサーバーにアップロードします

[〜＃〜] b [〜＃〜]FLDraw Interactive Image Creator のようなソフトウェアを使用する地図画像であり、インタラクティブにしたい）：

  1. 空のプロジェクトを作成し、新しいプロジェクトを作成するときにベース画像としてマップ画像を選択します
  2. 各州に（形状メニューから）ポリゴン要素を追加します
  3. 各ポリゴンについて、ダブルクリックしてプロパティウィンドウを開きます。ここで、マウスオーバーとクリックのイベントタイプを選択し、形状の不透明度を0に変更して非表示にします。
  4. プロジェクトを保存してHTML5に発行すると、FLDrawはプロジェクトに必要なすべてのファイルを含む新しいフォルダーを作成し、サーバーにアップロードできます。

オプション（A）はプログラマーまたは必要なコードとSVGファイルを作成する人がいる場合は非常に優れています。オプション（B）は、誰かを雇ったり、スクラッチ

他にもいくつかのオプションがあります。たとえば、SVGの代わりにHTML5 Canvasを使用しますが、HTML5 Canvasを使用してズーム可能なマップを作成するのはそれほど簡単ではありません。

4
bestapps

誰かがそれを検索する場合に備えて-私はいくつかのサイトでそれを使用しましたが、カスタマイズとRDの可能性は常に必要なものにぴったりでした。シンプルで自由に使用できます：

クリック可能なCSSマップ

サイト上の他のスクリプトに関する注意点：Drupal 7.で、グラフィックメニューとして機能する）マップを操作する際にいくつかの迷惑な問題がありました。それらを処理するとき、私はマップで行き詰まりました-jquery.cssmap.js、CSS（両方ともローカル）およびスクリプトが適切な場所にあるにもかかわらず、それはまだ機能しませんでした。 -簡単な見落としで、スクリプトコードを例のように残し、競合がありました。フロント関数「$」を「jQuery」（または他のハンドラー）に変更するだけで完璧に動作します。

ここに私が言及するものがあります（もちろん、の代わりに前に置くことができます）：

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>
2
siudek

SVGで SVG to Script に移動すると、デフォルトの出力はイベントを追加するSVGコードのマップですが、簡単に識別され、必要に応じて変更できます。

1
Chasbeen

私はしばらくの間、私の州の地図に makeaclickablemap を使用してきましたが、それは本当に良いフィットであることが判明しました。

1
Tamas

私は同じ要件を持っていて、最終的にこれは Map converter でうまくいきました。これは、あらゆるマップ生成に最適なプラグインです。

1
rajnz18

次のコードが役立ちます。

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

ソース

0
friebe87

イメージマップを強化するために作成した別のイメージマッププラグインを次に示します。 https://github.com/gestixi/pictarea

すべての領域を簡単に強調表示し、ゾーンの状態に応じて異なるスタイル（通常、ホバー、アクティブ、無効）を指定できます。

同時に選択できるゾーンの数を指定することもできます。

0
Nicolas BADIA