Sticky Tooltip script happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 마우스효과 > Sticky Tooltip script 상세정보

클라우드태그

Javascript

PHP

html

asp

mysql

CSS

Mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

Sticky Tooltip script

해피팀

네티즌

소스분류

마우스효과

다운로드 횟수

1 회

간단설명

마우스 오버가 됐을때 레이어 툴팁을 보여주는 기능 입니다. Jquery를 이용해서 제작되어 있으며, 모든 브라우저에서 정상 작동이 됩니다.

평가하기

이 프로그램은 마우스 오버가 됐을때 레이어 툴팁을 보여주는 기능 입니다.
Jquery를 이용해서 제작되어 있으며, 모든 브라우저에서 정상 작동이 됩니다.^^

http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

위 사이트에 접속을 해서 소스를 다운로드 할 수 있습니다.

기본적인 장착 방법은 아래와 같습니다.^^

1. CSS 및 JS를 다운로드 받고, 장착을 원하는 페이지에 연결

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="stickytooltip.js">
    /***********************************************
    * Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    </script>
    <link rel="stylesheet" type="text/css" href="stickytooltip.css" />

2. 이벤트를 걸어야 되는곳에 아래와 같이 소스를 입력

    기존소스 : <img src='abc.gif' >
    변경된소스 : <img src='abc.gif' data-tooltip="layer_id_1">
                       (녹색으로 지정된 아이디는 아래 3번 항목에서 사용이 되어 집니다.)

    위 소스는 abc.gif 위에 마우스를 올렸을때 툴팁을 표시 하게 되는 소스 입니다.

3. <body> 태그안에 아래와 같이 레이어 추가

    <div id='mystickytooltip' class='stickytooltip'>
       <div id="layer_id_1" class="atip" style="width:200px">툴팁에서 보여져야 하는 HTML편집</div>
    </div>

    위 소스에서 mystickytooltip 레이어는 반드시 필요 합니다. (제거시 작동하지 않음)

사이트에 많은 장착들을 해보시고 잘 안되시면 "질문과답변" 게시판에 글 남겨 주세요.^^