지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator)

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator)

---

요즘에는 이미지맵(image map)은 잘 쓰이지 않는다. 이미지를 큼지막하게 잘라서(여백포함하여) 웹페이지를 만들던 때엔 이미지맵이 정말 유용하게 사용됐었다. 하지만 분명 이미지맵이 사용되어야 하는 순간이 있다. 아래 이미지는 네이버 부동산 페이지에서 가져온 서울시 지도 일부이다. 

 

네이버 부동산에서 가져온 서울시 지도 일부 이미지

예를 들어 위와 같은 이미지에 각 구별로 링크를 걸어달라고 한다면 어떻게 작업할 것인가? 바로 이런 경우에 이미지 맵을 유용하게 사용할 수 있다.

하지만 사각형이 아닌 저런 영역의 이미지 맵을 직접 포토샵을 열어서 꺾어지는 모든 부분의 좌표를 일일이 따서 코드로 표현하기란 쉽지 않은 일이다. 바로 이런 어려움을 해결해 줄 툴이 있다. Image Map Generator라는 온라인 서비스이다. 무료이고, 설치도 필요없고 사용법이 너무 간단하다. 이미지 맵 제너레이터 서비스는 아래 URL로 접속이 가능하다.

https://www.image-map.net/

Free Online Image Map Generator

---

Image Map Generator 웹사이트 메인 화면

접속하면 바로 사용법을 알게된다. 아주 큰 버튼 두개가 반기기 때문이다. 내 PC에 있는 이미지를 업로드하여 작업 또는 웹서버에 올라가있는 이미지URL을 통해 작업, 둘 중 한가지를 선택하면된다. 나는 로컬로 지도 이미지를 캡쳐해놨기때문에 "Select Image form My PC" 버튼을 클릭하여 이미지를 업로드했다. 

 

이미지로드가 완료되면 바로 직관적으로 작업할 수 있는 화면이 뜬다.

위 화면이 뜨면 이제 마우스로 클릭클릭(?)하며 도형을 그려주면 된다. Shape항목에서 Rect는 사각형, Poly는 다각형 Circle은 원을 의미한다. 각 구를 나누기 위해서 Poly로 선택한 뒤 이미지에서 작업을 시작한다.

 

꺾어진 부분을 클릭클릭하며 링크될 영역이 될 선을 이어준다.

한 구역의 영역이 끝나면 그 영역의 Link값, Title값, Target값을 수정해주고 영역 추가는 우측 하단 "Add New Area" 버튼을 클릭하면 추가된다. 영역 수정이 필요하면 Active항목의 라디오버튼을 클릭하면 이미지에서 해당 영역이 수정가능토록 활성화된다. 모든 영역의 작업이 끝나면 하단에 있는 "Show Me The Code" 녹색 버튼을 클릭하면 아래와 같이 바로 이미지맵 코드가 나오며, 그대로 복사해서 쓰면 된다.

 

내가 그린(?) 이미지맵 코드를 보여준다.

정말 간단하다. 이런 서비스를 제공하는데 아무런 대가도 바라지 않는다는게 더 놀라울뿐이다. 심지어 페이지에 광고도 없다.

---

2020/01/29 - [업무 도움되는] - 무료 온라인 이미지 최적화 서비스 - Optimizilla

무료 온라인 이미지 최적화 서비스 - Optimizilla

2019/09/04 - [JavaScript] - 무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

2019/08/28 - [JavaScript] - 강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)