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

1. 개요 (Overview)
객체에 사용자가 직접 디자인한 풍선도움말을 보여줄 수 있는 스크립트입니다.

2. 사용법 (Usage)
우선, 풍선도움말을 디자인해서 코드를 DIV 태그 안에 집어넣습니다. 꼭 display 속성을 none으로 해주셔야 합니다.
[code type=html]
<div id="balloonHint" style="display: none">
<table cellspacing="0" cellpadding="5" border="0" bgcolor="#ffffcc" style="border: 1px solid #cc3300">
<tr>
<td>대충 제목
</td>
</tr>
<tr>
<td>{{hint}}
</td>
</tr>
</table>
</div>
[/code]
그 다음에 풍선도움말을 활성화시킵니다. 아이디는 위에서 정한 아이디와 같기만 하면 뭐라도 상관없습니다.
[code type=html]

[/code]
이제 풍선도움말을 보여주고자 하는 태그에 hint 속성을 부여합니다.
[code type=html]http://mygony.com
이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.

3. 사용예제
아래는 이 스크립트의 간단한 예제입니다.

[#NOBR_START#]


http://mygony.com


[#NOBR_END#]

아래는 매뉴얼과 소스를 모두 포함한 압축 파일입니다.
[download]http://mygony.com;/wp-content/uploads/2005/04/281578.zip;Click to download[/download]

  1. 정말 간단한 스크립트 감동입니다..

    그리고 title을 다르게 적용하시고 싶으신분은
    html 에서 아래와 같이 hint_title 속성을 추가 하시고..

    <a href="http://mygony.com&quot; target="_blank" hint_title ="TITLE" hint="클릭하면 행복한고니의 홈페이지로 이동합니다.">http://mygony.com</a&gt; <br /><br />
    <select><option>셀렉트박스가 있어도 가리지 않아요.</option></select>
    <div id="balloon_hint" style="display:none">
    <table width="200" border="0" cellspacing="0" cellpadding="5" bgcolor="#FFFFCC" style="border:1px solid #FFCC66">
    <tr><td style="color:black;font-size:9pt;"><b>{{hint_title}}</b></td></tr>
    <tr><td style="font-size:9pt">{{hint}}</td></tr>
    </table>
    </div>

    이렇게 하시고 스크립트에서
    아래 부분을 수정하시면 됩니다.

    with (balloonHint.layer) {
    innerHTML = sourceHTML.replace("{{hint_title}}", hint_title);
    innerHTML = innerHTML.replace("{{hint}}", hint);
    show(evt.clientX, evt.clientY);
    }

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.