Raphaelの地図上でmouseoverイベントをトリガーする

Question

Raphaelプラグインを初めて使用していて、これまでのところドイツの地図を作成し、その中のすべての異なる地域を概説することができました。マウスオーバー効果をバインドする方法を知ったので、リージョン上にマウスを置くと色が変わります。マップの外側から同じマウスオーバーエフェクトをトリガーしたい瞬間まで、すべてがうまく見えます。すべての地域へのリンクのリストがあり、各リンクは、地図に表示されたそれぞれの地理的位置（経路）を色分けする必要があります。問題は、私が外部からマウスオーバー効果を引き出す方法を知らないことです。

これは私が私のコードで使用リファレンスガイドです：Clickable France regions map

これは私のマップの初期化です：私の「通常の」マウス効果は場所を取るところ

var regions = []; 

var style = { 
    fill: "#f2f2f2", 
    stroke: "#aaaaaa", 
    "stroke-width": 1, 
    "stroke-linejoin": "round", 
    cursor: "pointer", 
    class: "svgclass" 
}; 

var animationSpeed = 500; 

var hoverStyle = { 
    fill: "#dddddd" 
} 

var map = Raphael("svggroup", "100%", "auto"); 
map.setViewBox(0, 0, 585.5141, 792.66785, true); 

// declaration of all regions (states) 
.... 
var bayern = map.path("M266.49486,..,483.2201999999994Z"); 
bayern.attr(style).data({ 'href': '/bayern', 'id': 'bayern', 'name': 'Bayern' }).node.setAttribute('data-id', 'bayern'); 
regions.push(bayern); 

これは、次のとおりです。

for (var regionName in regions) { 
    (function (region) { 
     region[0].addEventListener("mouseover", function() { 
      if (region.data('href')) { 
       region.animate(hoverStyle, animationSpeed); 
      } 
     }, true); 

     region[0].addEventListener("mouseout", function() { 
      if (region.data('href')) { 
       region.animate(style, animationSpeed); 
      } 
     }, true); 

     region[0].addEventListener("click", function() { 
      var url = region.data('href'); 

      if (url){ 
       location.href = url; 
      } 
     }, true); 
    })(regions[regionName]); 
} 

私はリンク付きのメニューを持っており、それぞれをそれぞれの地域にバインドして、アニメーションを適用することもできます。

$("ul.menu__navigation li a").on("mouseenter", function (e) { 
    // this function displays my pop-ups 
    showLandName($(this).data("id")); 
    // $(this).data("id") returns the correct ID of the region 
}); 

私は任意のアイデアに感謝します！前もって感謝します！

Answer 1

私はそれを行う方法を考え出しました。確かに、特にパフォーマンスの点で、最も最適なものではありませんが、少なくともそれは私に望ましい出力を与えました。私はまだもっと良い答えを得ていますが、今のところマウスオーバーイベントの中の新しいループが仕事をしています。

$("ul.menu__navigation li a").on("mouseenter", function (e) { 
    // this function displays my pop-ups 
    showLandName($(this).data("id")); 

    // animate only the one hovered on the link list 
    var test = '/' + $(this).data("id"); 

    for (var regionName in regions) { 
     (function (region) { 
      if (region.data('href') === test) { 
       region.animate(hoverStyle, animationSpeed); 
      }   
     })(regions[regionName]); 
    } 
});