행복한고니
http://mygony.com
http://mygony.com/tt/index.php/142

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

/**
* 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으로 해주셔야 합니다.

그 다음에 풍선도움말을 활성화시킵니다. 아이디는 위에서 정한 아이디와 같기만 하면 뭐라도 상관없습니다.

이제 풍선도움말을 보여주고자 하는 태그에 hint 속성을 부여합니다.
http://mygony.com

이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.