국가를 보여주기 위해 이미지 매핑

Question

HTML5에 직사각형과 다각형을 만들려고했는데, 우리가 언제 어떤 섹션이나 div의 위치를 ​​변경하거나 우리가 볼 수있는 변경 사항을 언제 변경하는지 알고 있습니다. 변경과 동시에 결과 (Chrome 사용)가 표시됩니다. 하지만 난 사각형 또는 POLY 서로 다른 코드를 제공하려고 할 때, 그 결과는 라이브 표시되지 않습니다, 나는 그들이 지금

<map name="usaMap" id="usaMap"> 
    <area id="ak" shape="rect" coords="76,347,138,408" href="#" alt="Usa_map" /> 
</map> 

EG를 어디에 서 있는지, 결과 코드를보고 다른 곳에서 화면을 클릭해야 지금 내가 코드를 바꿀 때, 나는 RECT에서 라이브 변화를 원한다, 가능하니? 모든 브라우저에서 또는 어떤 기술을 통해?

Answer 1

SVG가 좋은 해결책 인 것 같습니다.

무료로 사용할 수있는 미국의 여러 SVG지도가 있습니다.

각 상태는 경로로 표현됩니다 (예 : CSS 영역 맵).

각 상태 경로는 DOM 요소이므로 사용자가 각 상태를 가리킬 때 개별 상태를 강조 표시하는 이벤트 처리기를이 SVG 경로에 할당 할 수 있습니다.

CSS 접근자를 사용하여 상태 경로를 얻고 javascript를 사용하여 해당 상태 속성을 변경할 수도 있습니다. 예를 들어 알래스카의 채우기 색을 프로그래밍 방식으로 녹색으로 변경할 수 있습니다.

다음은 미국의 각 상태를 강조 표시 한 SVG지도입니다.

http://jqvmap.com/

나는 당신이 당신의 질문에 HTML5의 캔버스 태그를 넣어 참조하십시오. 다음은 SVG 맵으로 시작하여 Canvas에 맵을 그려주는 예제입니다.

http://davidlynch.org/projects/maphilight/docs/demo_usa.html