[펌] 풍선 도움말 스크립트

이번엔 풍선도움말 스크립트를 만들어봤습니다.
풍선도움말이 뭔지 모르시는 분들은 없을테니, 대충 설명은 생략하고 우선 소스부터 올립니다.
※ 사용하실때는 반드시 윗부분의 주석까지 포함해야 합니다.

[CODE] /** * Created by 행복한고니 * * Homepage : http://mygony.com * Last update : 2005/04/10 * * 2005-04-10 * - 첫번째 릴리즈 */ function balloonHint(Id) { balloonHint.layerId = Id; document.addEventListener('mouseover', balloonHint.Show, false); document.addEventListener('mouseout', balloonHint.Hide, false); } balloonHint.layerId = null; balloonHint.Show = function (evt) { if (typeof evt == "undefined" || typeof evt.target == "undefined") { (evt=event).target = event.srcElement; } var hint = evt.target.getAttribute("hint"); if (hint == null || hint.length == 0) return; if (balloonHint.layer == null) balloonHint.makeLayer(); with (balloonHint.layer) { innerHTML = sourceHTML.replace("{{hint}}", hint); show(evt.clientX, evt.clientY); } } balloonHint.Hide = function (evt) { if (typeof evt == "undefined" || typeof evt.target == "undefined") { (evt=event).target = event.srcElement; } var hint = evt.target.getAttribute("hint"); if (hint == null || hint.length == 0) return; balloonHint.layer.hide(); } balloonHint.makeLayer = function() { if (typeof document.body == "undefined") { document.body = document.getElementsByTagName("BODY")[0]; } balloonHint.layer = document.getElementById(balloonHint.layerId); balloonHint.layer.sourceHTML = balloonHint.layer.innerHTML; balloonHint.layer.style.position = "absolute"; if (typeof window.createPopup == "undefined") { balloonHint.layer.show = function(x, y) { balloonHint.layer.style.display = "block"; balloonHint.layer.style.left = (x+document.body.scrollLeft+1) + "px"; balloonHint.layer.style.top = (y+document.body.scrollTop+1) + "px"; } balloonHint.layer.hide = function() { balloonHint.layer.style.display = "none"; } } else { balloonHint.layer.popup = window.createPopup(); balloonHint.layer.show = function(x, y) { with (balloonHint.layer) { style.display = "block"; var w = offsetWidth, h = offsetHeight; style.display = "none"; popup.document.body.innerHTML = innerHTML; popup.show(x, y, w, h, document.body); } } balloonHint.layer.hide = function() { balloonHint.layer.popup.hide(); } } } if (typeof document.addEventListener == "undefined") { if (typeof document.attachEvent != "undefined") { document.addEventListener = function (eventType, listener) { document.attachEvent("on"+eventType, listener); } document.removeEventListener = function (eventType, listener) { document.detachEvent("on"+eventType, listener); } } } 2. 사용법 (Usage) 우선, 풍선도움말을 디자인해서 코드를 DIV 태그 안에 집어넣습니다. 꼭 display 속성을 none으로 해주셔야 합니다. <div id="balloonHint" style="display:none"> <table border="0" cellspacing="0" cellpadding="5" bgcolor="#FFFFCC" style="border:1px solid #CC3300"> <tr><td>대충 제목</td></tr> <tr><td>{{hint}}</td></tr> </table> </div> 그 다음에 풍선도움말을 활성화시킵니다. 아이디는 위에서 정한 아이디와 같기만 하면 뭐라도 상관없습니다. <script language="javascript">balloonHint("balloonHint")</script> 이제 풍선도움말을 보여주고자 하는 태그에 hint 속성을 부여합니다. <a href=" http://mygony.com" target="_blank" hint="클릭하면 행복한고니의 홈페이지로 이동합니다.">http://mygony.com</a> [/CODE]
이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.

링크 1에 오시면 조금 더 정돈된 코드와 소스를 포함한 매뉴얼 페이지 압축파일, 간단한 예제를 보실 수 있습니다.

출처 : http://www.phpschool.com.