イメージマップとjQueryでRaphael jsを使用する

Question

私は関連するイメージマップ（下記）を持つイメージを持っています。イメージマップ要素にマウスオーバーすると、jQueryを使って検出しています。私がしたいことは、Raphael jsを使ってマップの上にいくつかの「もの」を描くことです。

<map name="regionMapView" id="regionMapView"> 
     <area id="Carlisle" shape="circle" coords="305,505,10" alt="Carlisle" title="Carlisle" /> 
    </map> 
    <img id="imgMap" src="MapLarge.gif" width="585" height="1135" border="0" usemap="#regionMapView" /> 
    <script type="text/javascript" src="./Scripts/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="./Scripts/raphael-min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     var paper = Raphael(0,0, 585, 1135); 
     var t = paper.text(200, 200, "Text at 200, 200"); 
     $("#Carlisle").hover(function() { alert('in'); }, function() { alert('out'); }); 
     }); 
    </script> 

上記番組のテキスト、それは必要がありますが、jQueryのラファエル・キャンバスは、イメージマップの上に座っているので、イベントが発生しません（私は視覚的に欲しいものである）が、発射からのjQueryのイベントを防ぐことができますように。次のように画像IDを使用するようにRaphaelを変更した場合。

その後、逆のことが起こりますが、jQueryからイベントを取得しますが、テキストは表示されません。

画像そのものは、透過性のない単色のカラーマップです。

Answer 1

画像マップとjQueryを忘れて、画像そのものの上に単にRaphaelを使用してください。

Raphaelを使用して、カスタム関数/イベントをアタッチできる円/領域（最初は透過的）を定義することができます。このようにして、ユーザーが下にある画像のある部分にカーソルを置くと、Raphaelの機能が起動し、必要なビジュアルフィードバックを生成することができます。

ここでは、ホバーイベントとクリックイベント用に作成したオブジェクトにイベントをアタッチする方法について説明します。 http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

また、http://raphaeljs.com/australia.htmlのソースをご覧ください。

I.e.次のようなものがあなたのマップに円を描き、それをアニメートします。しかし、あなたは、あなたが「紙」のdivは「キャンバス」のdivに含まがあることがわかりますhttp://raphaeljs.com/australia.htmlサンプルコードのソースをよく見ると、ホバーイベントがなど、あなたのテキスト

var circle = paper.circle(50, 40, 10); 
circle.hover(function(){ 
       this.animate({ 
       fill: '#1669AD' 
       }, 300); 
      }, 
      function(){ 
       this.animate({ 
       fill: attributes.fill 
       }, 300); 
      }) 
      }); 

Answer 2

を表示するように修正することができます。.. "paper" divは多かれ少なかれコンテナであり、ほとんどのアクションが行われます...

私の場合、私はバックグラウンドで経営管理委員会の画像を使用していました... so私はCSS "background-image：url（ 'myImage.jpg'）no-repeat;を使用しました。プロパティを使用して、私の画像 を "paper" divの背景に置き、その幅と高さを画像と同じに設定します。それがトリックでした。

実際に私が思いついたのは、ユーザーが画像上の各メンバーにマウスを動かすと、各委員のメンバーの詳細情報がツールチップに表示されていることでした。透明な.pngは、私が必要とする精度に達するのを許していないので、私はSVGベクトルとラファエルコーディングに行くことにしました... 私はMicrosoft Expression Blendを使ってすべてのパスを作成しました。欲しい）...

私はExpression BlendツールでWPFとSilvelright BIアプリケーションを使用しているのですが、 パス部分を描画してカットするのはかなり簡単でした。 Raphaeに生成された "M ....... z"パラメータを貼り付けますlコード - http://raphaeljs.com/australia.htmlサンプルコードとほとんど同じです。

私はほとんどのブラウザ（IE、Firefox、Chrome、Safari ...）でコードをテストしました。）それはかなりうまくいったし、私は結果にかなり満足していると言わなければならない。クライアントもそうです:)