풍선도움말 스크립트

행복한고니
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

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

랜덤출력 tr 행에 사용




랜덤 출력


헤더
0번 내용
1번 내용
2번 내용
3번 내용
4번 내용
5번 내용
6번 내용
7번 내용
8번 내용
9번 내용
푸터

새로고침 하는 거다.