제목 : 활용예제 : 버튼 또는 특정 영역에 마우스 오버시 풍선도움말(레이어)를 띄우는 예제
<script language="javascript" type="text/javascript">
/// <summary>
/// 버튼 또는 특정 영역에 마우스 오버시 풍선도움말(레이어)를 띄우는 예제
/// </summary>
//풍선 도움말 스크립트
function sample_string_view(ans, typea) {
var obj = document.getElementById(typea);
if (ans) {
obj.style.top = window.event.clientY + document.body.scrollTop + 10;
obj.style.left = window.event.clientX + document.body.scrollLeft + 10;
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
}
function sample_string_move(objName) {
var obj = document.getElementById(objName);
if (obj.style.display == "block") {
obj.style.top = window.event.clientY + document.body.scrollTop + 10;
obj.style.left = window.event.clientX + document.body.scrollLeft + 10;
}
}
</script>
<!-- 풍선도움말 -->
<div id='Memo1' style="display: none; left: 465px; position: absolute; top: 270px">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#6bbaef" id="Table1576">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="5" bgcolor="#ffffff" width="300" id="Table1576s">
<tr>
<td align="JUSTIFY">
이곳에 내용이 들어옵니다.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- /풍선도움말 -->
<input type="button" value="마우스를 올려보세요."
onmouseover="sample_string_view(true, 'Memo1');"
onmousemove="sample_string_move('Memo1');"
onmouseout="sample_string_view(false,'Memo1');" />