대화 형 일러스트지도를 만드는 가장 좋은 방법은 무엇입니까?

Question

나는 홀리데이 리조트를 위해 디자인 된 일러스트 사이트 맵을 가지고 있습니다. 그것은 여러 영역을 가지고 있습니다. 강조 표시를하면 현재 끝난 항목에 대한 정보가있는 정보 상자가 표시됩니다.

강조 표시된 영역은 원래 기본지도와 약간 다른 비트 맵을 가지므로지도 강조 라이브러리를 사용하면 옵션이 아닙니다.

사용자가 특정 영역을 마우스로 가리키면 중첩 된 이미지와 정보 상자를 표시해야합니다.

영역이 사각형이 아니며 일부 강조 표시된 항목이 여러 영역으로 나뉩니다.

이와 같은 대화식지도를 만드는 가장 좋은 방법은 무엇입니까? JS를 사용하여 HTML 이미지 맵을 사용해야합니까 아니면 더 현대적인 방법이 있습니까?

Answer 1

한 가지 대안은 아마도 jquery.svg 또는 Raphaël을 사용하는 SVG입니다. 다음 예를 살펴 유무 : 요소

Australia 마우스 오버에 대한 응답으로 애니메이션 - - - - - 그래픽 데이터

Pie chart 이상 팝업

• Analytics 그것의 실제지도 예를

SVG의 이점은 다음과 같습니다.

• 마크 업으로 끝납니다. 궁극적으로 접근성 개선 될 수있는 데이터를 빙뿐만 아니라 기분 좋은 의미 빛 당신에게 오히려 현재 마우스 위치를 되돌아보다, 그들을 처리 객체 및 오프셋
• 그것은 part of HTML5을의에 살 수
• 이벤트 핸들러를 줄 수도 나는지도 같은 그래픽을 만들 찾는 게 아니에요하지만