웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
풍선도움말 스크립트
2005.04.11 00:14
링크 1 : http://mygony.com/tt/index.php?pl=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으로 해주셔야 합니다.
<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>
이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.
링크 1에 오시면 조금 더 정돈된 코드와 소스를 포함한 매뉴얼 페이지 압축파일, 간단한 예제를 보실 수 있습니다.
이번엔 풍선도움말 스크립트를 만들어봤습니다.
풍선도움말이 뭔지 모르시는 분들은 없을테니, 대충 설명은 생략하고 우선 소스부터 올립니다.
※ 사용하실때는 반드시 윗부분의 주석까지 포함해야 합니다.
/**
* 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>
이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.
링크 1에 오시면 조금 더 정돈된 코드와 소스를 포함한 매뉴얼 페이지 압축파일, 간단한 예제를 보실 수 있습니다.
댓글 3
-
대류
2005.04.11 01:16
-
11월의비
2005.04.19 01:12
음...
이미지 링크는 되지 안네요 -_-;; -
강영준
2005.04.19 21:39
여러개의 버튼에 소스를 적용시킬때 제목을 다 따로 붙일수는 없나요?
제목 | 글쓴이 | 날짜 |
---|---|---|
통합 검색엔진 소스입니다. [5] | 철혈단 | 2003.02.19 |
폰트 크기를 방문자가 자유자재로 바꾸도록.. | 깜보 | 2003.02.19 |
개판 오분전 select menu......... [10] | 미친개 | 2003.02.18 |
[수정 및 추가 설명] 음악 듣기 소스 [4] | 당근당근 | 2003.02.17 |
페이지 로딩중 효과 [7] | 깜보 | 2003.02.16 |
[수정판] 갤러리 이미지 드레그 이동 가능한 필터 사용 스르륵 버젼 ^^ [10] | 모라미 | 2003.02.15 |
요청해오신 레이어 무조건 중앙에 열리기 와 클릭하는 곳에 열리기 두가지 소스입니다. [4] | 모라미 | 2003.02.25 |
레이어를 이용한 초간단 갤러리를 만들어봅시다. [6] | 모라미 | 2003.02.15 |
흐르는 내용 강좌 [4] | 라엘 | 2003.02.10 |
[허뎝이즈]간단한 테트리스 만들어 보기^_^[허뎝이 수정했음돠] [11] | 허졉이즈 | 2003.02.06 |
링크된 텍스트 오버시 위로 스크롤..예제 확인 [2] | ▩윤미 | 2003.02.06 |
링크된 텍스트 클릭지 위로 스크롤되는 예제확인 [1] | ▩윤미 | 2003.02.06 |
미디 랜덤으로 듣기 완벽해결! [4] | K.샘 | 2003.02.05 |
음악 듣기 소스 | 당근당근 | 2003.02.04 |
최상위로 만들기 소스 [13] | 앳플군 | 2003.02.04 |
KBS VOD 최상위로 만들기 소스 (필요 부분만 수정) [3] | kimbilly | 2003.02.02 |
바탕화면에 바로가기 아이콘을 만드시겠습니까? [소스분석용] [12] | RedEye | 2003.02.02 |
한페이지에서 여러개의 크롬리스 창 띄우기..(ByKlein Chromeless Window) [3] | 아린~★ | 2003.01.29 |
주소 보여주기 시를 때 제가 자주 쓰는 방법 이건 조회수 빵이다 ㅡ0ㅡ; [21] | ☆좀비파우더™ | 2003.01.28 |
로그인과 로그아웃을 체크하는 방법입니다. [3] | 이영호 | 2003.01.24 |
유용하게 사용하겠습니다.