[Javascript] 이미지맵 에디터(ImageMap Editor) v1.0
이미지맵 에디터(ImageMap Editor) v1.0
ㅁ 탄생 배경
회사에서 일하면서 레이어팝업 형태의 이벤트성 공지 팝업을 만드는 경우가 종종 있다. 그럴때 마다 이미지를 잘라 HTML문서 형태로 만들자니 귀찮고 단순히 링크만 연결하면 끝인데... 해서 이미지맵를 이용해서 링크를 걸게 되는데, 나 같은 프로그래머는 포토샵 툴을 설치 하지 않으니... 그림판으로 대충 좌표를 찾아서 링크를 걸게 된다. 정말 귀찮은 작업이라 할 수 있겠다. 그래서 만들었다. 그냥 원하는 영역을 드래그해서, 그 곳에 링크를 걸 수 있도록 하는 일명 "이미지맵 에디터(ImageMap Editor)"!! 기능은 단순하지만, 그냥저냥 쓰기 편하다. 나와 같은 고생하는 사람들을 위해 파일을 공유 한다.
ㅁ 매뉴얼
1. 객체 생성
|
var imgEditor = new Happydong.ImageMapEditor({ objId: "#popPanel", guideLineColor: "#A7ED00", isOnDetailView: true, detailViewSize: 100, detailViewBorderColor: "#000" }); |
[코드 1 - 객체 생성 관련]
- 위 코드 1과같이 인스턴스(Instance)를 생성합니다. 해당 생성 파라미터(Parameters)설명은 아래와 같다.
* objId - 이미지 편집판 ID
* guideLineColor - 가이드선 색상을 지정.
* isOnDetailView - 가이드선 상세보기창 볼지여부. (Default : false)
* detailViewSize - 가이드선 상세보기창의 사이즈를 지정. (Default : 50)
* detailViewBorderColor - 가이드선 상세보기창의 Border 컬러를 지정.
2. 이미지 추가
|
imgEditor.setImage("imageUrl.jpg"); |
[코드 2 - 이미지 추가 관련]
- 타켓(편집 대상) 이미지를 넣도록 한다.
3. 이미지맵 태그 반환
|
var outputTag = imgEditor.getImageMap(); |
[코드 3 - 이미지맵 태그 반환 관련]
- 편집된 이미지를 img map태그로 반환한다.
4. 에디터 초기화
|
imgEditor.clearEditor(); |
[코드 4 - 이미지맵 에디터 초기화 관련]
- 에디터를 초기화 한다.
이상 간단하게 매뉴얼을 정리해 본다.
(이 스크립트를 Jquery 라이브러리 기반을 두고 있기 때문에 Jquery는 필수로 필요하다.)
ㅁ 다운로드 및 데모(Demo)
- 다운로드 파일 :
Happydong_ImageMap_v1.zip- 데모 : [바로가기]
** 혹시나, 파일을 다운받아 사용하시는 분들이 있다면, 버그에 대한 신고는 댓글 또는 메일(master@happydong.kr)으로 보내 주시면 감사하겠습니다.