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

카테고리

Happydong (1363)
프로그래밍 (156)
01.C#기초 (4)
02.C#고급 (13)
03.ASP.NET (28)
04.HTML&Script (17)
05.Silverlight (38)
06.C 언어 기초 (2)
07.iOS (14)
08.Java (5)
09.SQL (8)
10.컴퓨터보안 (10)
11.패턴이야기 (3)
12.유니티3D (1)
13.Ubuntu (7)
14.Node.js (6)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



이미지맵 에디터(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
, |



출처 : http://html5experts.kr/archives/1516

 

css 투명처리 관련. 

 

opacity: 0.75;

filter: alpha(opacity = 75); // IE6,7

-ms-filter: “alpha (opacity=75)”; // IE8

-moz-opacity: 0.75; // Firefox 1.5

-khtml-opacity: 0.75; // Safari 1.x

zoom: 1; 

 

** IE에서는  filter, opacity속성을 사용하려면 width와 height등의 정보가 없으면 안됨. 이를 좀더 자연스럽게
처리하려면 zoom:1을 추가하면 좋음.

Posted by happydong
, |



특정 달에 특정 일자를 알고 싶을때 사용할 수 있는 자바스크립트 함수이다. 가령 2013년 6월의 마지막주 금요일이 몇일 인지 알고 싶을때, 사용한다.


// 
해당 달의 요일별로 구분해서 Array형식으로 반환합니다.

// ( 참고 : 0: , 1:, 2:, 3: , 4:, 5: , 6: )

function getMonthToArrayDays(tmonth) {

 

        var tlastday = new Date((new Date(tmonth.getFullYear(),

                                       tmonth.getMonth() + 1, 1)) - 1);

 

        var firstDay = tmonth.getDay();

 

        var arrdaylist = new Array(7);

        arrdaylist[0] = new Array(); //

        arrdaylist[1] = new Array(); //

        arrdaylist[2] = new Array(); //

        arrdaylist[3] = new Array(); //

        arrdaylist[4] = new Array(); //

        arrdaylist[5] = new Array(); //

        arrdaylist[6] = new Array(); //

 

        var tempday = firstDay;

 

        for (var i = 1 ; i <= tlastday.getDate() ; i++) {

            var ttempval = tempday % 7;

            arrdaylist[ttempval].push(i);

            tempday++;

        }

        return arrdaylist;

}

[소스 1 - 해당 달의 일자를 배열형식으로 반환하는 함수]

 

위 [소스1]은 해당 달의 요일별로 일자들을 배열로 반환하는 함수이다. 즉, 마지막주 금요일이라 하면 배열의 5번째 열에서 마지막 아이템을 찾으면 마지막 날짜가 나올 것이다. 아래는 사용 예제를 나타낸 것이다.

 

var tmonth = new Date("2013-06-01");

 

       var arrlist = getMonthToArrayDays(tmonth);

 

       // 마지막주 금요일은 몇일인지 확인.

       var lastFriday = arrlist[5][arrlist[5].length - 1];

[소스 2 - 함수 호출 내용]

위 소스를 실행시켜보면 28이라는 숫자가 나올 것이다.

2013년 6월의 마지막주 금요일은 28일이다.

Posted by happydong
, |