메뉴 건너뛰기

조회 수 864 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

amchart에 가시면 각국 나라를 무료로 다운받아서 커스텀해서 사용할 수 있습니다.

 

 

 

그중 한국을 클릭하여 접근하여 svg파일을 다운로드합니다.

 

 

 

 

 

 

 

 

이동하여 원하는 파일(High, Low 버전)을 받으시면 svg파일을 다운로드 받으실 수 있습니다.

 

 

 

 

 

 

다운로드 받아서 열어보면 간단하게 특별시, 광역시, 도 정도로 된 한국맵을 볼 수 있는데,

간단하게 색상 변경이나 클릭이벤트를 추가해보겠습니다.

 

 

 

 

 

열어보면 굉장히 복잡한 태그들이 보일텐데 우린 여기서 중요하게 볼건

path 태그들입니다.

 

 

 

 

각각의 path들이 지도를 그리고 있으므로 해당부분의 아이디값에 click이벤트 또는 인라인 스타일 태그나 클래스값을

개별적으로 처리하여 색상처리를 하면 값을 바꿀 수 있습니다.

 

기본적으로 처리되어있던 클래스 title이 서울로 되어있는 부분에 class를 추가한 후 파란색으로 변경해보겠습니다.

 

 

 

 

SeoulLand라는 클래스를 추가한 후 style태그에서 fill을 추가하였습니다.

 

SeoulLand css

 

 

 

 

그럼 아래와 같이 지도가 변경된 걸 볼 수 있습니다.

 

특정 지역만 색 변경

 

 

 

 

좀 더 그럴싸 해보이도록 hover속성도 추가해보겠습니다.

 

 

 

 

 

모든 지역인 path태그들은 land 클래스가 처리 되어있으므로 land클래스에 hover속성을 추가하여 간단하게 변경이 가능합니다.

 

 

 

 

hover 효과

 

 

 

 

 

 

 

클릭 이벤트 또한 간단한 예시를 보겠습니다.

 

 

 

 

id에 이벤트 처리를 하셔도 되지만 간단한 예제를 보기 위해 태그 내부에 onclick속성을 주었습니다.

서울 부근을 클릭하게 되면 아래와 같이 alert가 동작하는 것을 볼 수 있습니다.

 

클릭 이벤트 추가

 

svg내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.

 

 

 


List of Articles
번호 제목 날짜 조회 수
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 1437
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 197
225 DTREE 트리구조 만들기 file 2021.03.26 851
224 페이지 이동 2021.03.26 190
223 default 매개변수(매개변수 기본값) 2021.03.26 199
222 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 319
221 현재 날짜, 시간 ( Month + 1 에 대해서 ) 2021.03.25 218
220 오브젝트 속성 2021.03.25 237
219 jqgrid 이용한 그리드 활용하기 file 2021.03.25 2285
218 HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) file 2021.03.09 710
217 Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 2021.03.09 302
» Javascript - Free SVG 한국맵 제어 처리 file 2021.03.09 864
215 Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 2021.03.09 266
214 javascript - vanillaJS로 체크박스(checkbox) 제어하기 file 2021.03.09 472
213 Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등) 2021.03.09 718
212 Javascript - 사업자 등록번호 유효성 체크 file 2021.03.09 1088
211 Javascript - Calendar 달력 생성하고 제어하기 2021.03.09 511
210 Javascript - 입력한 년, 월의 마지막 날짜 구하기 2021.03.09 219
209 Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항) file 2021.03.09 2121
208 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 36157
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved