마우스오버시 이미지 또는 설명 풍선도움말이 뜨는 간단한 스크립트입니다.

소스: http://qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_pg=1&g_thrd=157

소스의 내용은 평범하며 주요 포인트는,
1. 레이어의 크기를 읽어올때 offsetWidth,offsetHeight를 사용한다는 점과
2. 페이지의 크기를 읽어올때
            var clntW = (document.compatMode=='BackCompat')?(document.body.clientWidth ):(document.documentElement.clientWidth );
            var clntH = (document.compatMode=='BackCompat')?(document.body.clientHeight):(document.documentElement.clientHeight);
와 같이 한 것입니다.

사용법은,
1. 헤더에 <script type='text/javascript' src='Q_tooltip.js'></script>를 삽입하고
2. a태그에 <a id='i_1' href='링크주소'>링크</a>와 같이 아이디를 부여하고
3. Q_tooltip.add(아이디,그림주소,설명글,폭,높이);와 같이 해서 스크립트로 툴팁을 추가해 주면 됩니다.

링크1은 소스코드이고 링크2는 적용예입니다.

* customizing할 수 있게 수정하였습니다.
//Q_tooltip.background_color = 'white';
//Q_tooltip.font    = '12px arial';
//Q_tooltip.padding = '10px';
//Q_tooltip.border  = '1px solid silver';
필요한 부분의 값을 변경한 후 주석을 풀면 됩니다.