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]
스크립트 작동에 대한 문의입니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
으로 된 경우에는 풍선 도움말이 나타나는 위치가 고정되지 않는 것 같습니다. 어찌해야 할지 모르겠습니다...
생각하지 못했던 부분이네요.
일단 한번 봐야겠어요. -_-a
정말 간단한 스크립트 감동입니다..
그리고 title을 다르게 적용하시고 싶으신분은
html 에서 아래와 같이 hint_title 속성을 추가 하시고..
<a href="http://mygony.com" target="_blank" hint_title ="TITLE" hint="클릭하면 행복한고니의 홈페이지로 이동합니다.">http://mygony.com</a> <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);
}