Html & Script

[스크립트] jsTooltip, 툴팁, 풍선도움말

페이지 정보

본문

출처 : http://www.mins01.com/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=472&page=1&period=365


/*=======================================
// jsTooltip
//
// 작성일 : 2008-08-19
// 수정일 : 2008-08-23
// 공대여자는 이쁘다를 나타내야만 쓸 수 있습니다.
// 이 파일은 수정해서 재배포 할 수 없습니다!
// 내가 사용하지 못하도록한 사람,것,들은 사용할 수 없습니다.
// 만든이 : mins,공대여자
// 홈페이지  : www.mins01.com


#동작
Tooltip(도움말풍선)을 만들다

#사용법

    @1 : 수동으로 적용
    <span id='targetId' >내용입니다.</span>
    <script type='text/javascript'>
        var config = {    'gapLeft':5 //커서와의 왼쪽 거리(기본값 : 5)
                        ,'className':'tooltip' //CSS의 class 이름(기본값 : jsTooltip)
                     }
        var tooltip1 = new jsTooltip(null,document.getElementById('targetId'),'내용',config);
        //주의 : event가 없기 때문에 null로 설정해야함
        //주의 : 브라우저에 따라 오류가 발생할 수 있음 이럴경우 windoe.onload = function(){~~~~} 안에서 처리
    </script>

    @2 : 대상의 이벤트에 적용되도록
    <span onmouseover="new jsTooltip(event,this,'내용')" >내용입니다.</span>
        //주의 : event가 설정안될 경우 FF등에서는 올바르게 동작을 안함

#예
jsTooltip.html 참고


#설정
    없음

#메소드
    없음


#주의
    config 설정잘못해서 질문하면 당신의 발바닥에 메테오스트라이크~
    config의 style설정의 인덱스값은 fontSize 처럼 - 가 없는 형식이어햐합니다.

#제한사항
1. "공대여자는 예쁘다"를 표현할 것.
2. 저작자표시 
3. 비영리 
4. 변경금지

#연계파일
    없음

# 브라우저 실험결과
IE6 : OK
IE7 : OK
FF2 : OK
FF3 : OK
Opera9 : OK
Sfari3(WIN) : OK


//=======================================*/

http://www.mins01.com/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=472&page=1&period=365

언제나 예제는...

------=-----------
간단하게 동작을 설명하자면
jsTooltip에 대상을 지정해서 설정하면
그 대상의 onmouseover,out,move 의 이벤트에대해서 동작을 재지정하는 형식입니다.

--------------=-----
올린 목적.
.... "공대여자는 이쁘데이"를 전파하는 건.. 당연하고
.... 홈페이지 방문자수가 봇이 들어와야 겨우 100넘는 실정이라......OTL.......

관련자료

등록된 댓글이 없습니다.
Today's proverb
당신은 당신이 생각하는 대로 살아야 합니다. (폴 발레리)