시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 지도 > Simple jQuery Plugin For Highlighting Image Map - Maphilight 상세정보
사이트등록
현재접속자 새로고침
Simple jQuery Plugin For Highlighting Image Map - Maphilight
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 지도
다운로드 횟수 13 회
간단설명 SVG로 제작된 지도이미지 파일에서 마우스를 오버하거나, 클릭시 해당 지역을 하이라이팅 시켜주는 스크립트입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기

첨부파일의 압축을 해제하고 나오는
docs/index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다.






데모 페이지를 열면 위와 같이
몇가지 간단한 샘플데모로 이동하는 링크가 나옵니다.

The simple demo 를 클릭하면,




간단한 그림이 하나 나오고
마우스를 그림위에 올려보면 위 그림과 같이
그림 위에 특정 위치가 하이라이팅이 됩니다.



a map of the world 를 클릭해보면




세계지도가 표시가 되고,
각 나라에 마우스를 올려보면
지도상에 해당 나라의 영역만큼이 하이라이팅이 됩니다.

이 데모를 위한 HTML 소스코드를 열어서 보면




세계지도인 이미지파일 위에서,
한국을 하이라이팅 하기 위해서 필요한 좌표들을 정리해둔게 확인이 됩니다.
많은 나라들의 좌표들을 정리한 노력이 대단해 보이네요.


A map of the USA 를 클릭해보면,





미국의 각 주를 구분해둔 지도가 표시되고,
각각의 주를 클릭하거나, 마우스로 오버하면,



해당 주를 하이라이팅 해줍니다.


이 데모를 위한 HTML파일의 소스코드를 열어보니,
미국의 지도를 위해서,
http://en.wikipedia.org/wiki/Image:Map_of_USA_with_state_names.svg
위 이미지 파일을 이용했고, 
각각의 주를 구분하기 위한 지점을 HTML소스코드상에 정리해둔게 확인이 됩니다.




demo_usa.png 라는 이미지 파일을
wiki 사이트에서 미국의 지도를 한글로 제작해둔 이미지 파일로 살짝 교체를 해보니




위 그림 처럼 지도가 한글로 표시도 되고,
이 예제를 만드신 분이 정리해둔 각각의 좌표들 덕분에
미국의 각각 주에 마우스를 올려보거나,
클릭한 주에 해당하는 위치를 하이라이팅 해주는데 문제가 없는걸로 확인이 되네요.



꼭 지도를 화면에 표시하는 용도가 아닐수도 있는게,




SVG로 제작된 이미지파일과, 각 좌표를 정리하는 노력에 따라서,
위 그림과 같은 결과물도 가능하겠습니다.


출처는
https://www.jqueryscript.net/other/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight.html
입니다.


 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 24377751 보이는 도배방지키를 입력하세요.