메뉴 건너뛰기

조회 수 930 추천 수 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내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.

 

 

 


  1. No Image 26Mar
    by
    2021/03/26 Views 1545 

    opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행)

  2. No Image 26Mar
    by
    2021/03/26 Views 260 

    getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제

  3. DTREE 트리구조 만들기

  4. No Image 26Mar
    by
    2021/03/26 Views 258 

    페이지 이동

  5. No Image 26Mar
    by
    2021/03/26 Views 266 

    default 매개변수(매개변수 기본값)

  6. No Image 25Mar
    by
    2021/03/25 Views 384 

    자바스크립트에서 이벤트 중단 하는 방법

  7. No Image 25Mar
    by
    2021/03/25 Views 334 

    현재 날짜, 시간 ( Month + 1 에 대해서 )

  8. No Image 25Mar
    by
    2021/03/25 Views 411 

    오브젝트 속성

  9. jqgrid 이용한 그리드 활용하기

  10. HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기)

  11. No Image 09Mar
    by
    2021/03/09 Views 351 

    Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기

  12. 09Mar
    by 조쉬
    2021/03/09 Views 930 

    Javascript - Free SVG 한국맵 제어 처리

  13. No Image 09Mar
    by
    2021/03/09 Views 344 

    Javascript - form태그 내부 ajax처리시 2번 전송되는 현상

  14. javascript - vanillaJS로 체크박스(checkbox) 제어하기

  15. No Image 09Mar
    by
    2021/03/09 Views 797 

    Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등)

  16. Javascript - 사업자 등록번호 유효성 체크

  17. No Image 09Mar
    by
    2021/03/09 Views 567 

    Javascript - Calendar 달력 생성하고 제어하기

  18. No Image 09Mar
    by
    2021/03/09 Views 279 

    Javascript - 입력한 년, 월의 마지막 날짜 구하기

  19. Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항)

  20. Javascript - 이미지 미리보기 회전되어 나옴(EXIF)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved