Raphael지도에서 mouseover 이벤트가 발생했습니다.

Question

Raphael 플러그인을 처음 사용하고 있으며 지금까지 독일의지도를 만들고 내부의 모든 다른 지역을 간략하게 설명했습니다. 마우스 오버 효과를 바인딩하는 방법을 발견 했으므로 지역 위로 마우스를 가져 가면 색상이 바뀝니다. 지도 외부에서 동일한 마우스 오버 효과를 트리거하려는 순간까지 모든 것이 잘 보입니다. 모든 지역에 대한 링크 목록이 있으며 각 링크는 마우스를 가져 가면지도의 각 지리적 위치 (경로)에 색상이 지정되어야합니다. 문제는 외부에서 마우스 오버 효과를 트리거하는 방법을 모른다는 것입니다. Clickable France regions map

이 내지도 초기화입니다 :

이

내가 내 코드에 사용되는 참조 가이드

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]); 
} 

: 내 "정상"마우스 효과가 발생하는 경우

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); 

입니다

링크가있는 메뉴가 있는데 각 영역을 해당 영역에 바인딩하여 애니메이션을 적용 할 수 있습니다.

$("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]); 
    } 
});