블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'이미지맵 에디터'에 해당되는 글 1건

  1. 2014.02.04 [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)으로 보내 주시면 감사하겠습니다.

 

 

 

 

 

Posted by happydong
, |