이야기 마을 :: 풍선도움말(?) 마우스타겟의 옆에 레이어 띄워 보이기

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
#tooltip {position:absolute;
top:5;
left:5;
border:solid 3 FF6699;
background:CCFFCC;
color:660066;
font-size:9pt;
width:400;
height:500;
padding:2;
overflow:hidden;
z-index:10;
display:none;
}
</style>
<script language=javascript>
function showtip(text) {
   tooltip.innerText=text;
   tooltip.style.display="inline";
}
function hidetip() {
   tooltip.style.display="none";
}
function movetip() {
   tooltip.style.pixelTop=event.y+document.body.scrollTop;
   tooltip.style.pixelLeft=event.x+document.body.scrollLeft+10;
}
document.onmousemove=movetip;
/*
border:solid 3 FF6699; - 풍선 도움말 테두리색
background:CCFFCC; - 풍선도움말 바탕색
font-size:9pt; - 풍선도움말 글자크기
width:200; / height:20; - 풍선도움말의 크기 지정
*/
</script>

</HEAD>

<BODY>

<span id=tooltip></span>
<a name="top">
<span onmouseover="showtip('즐거운 하루 되세요');" onmouseout="hidetip();">
<IMG src="그림1.gif" >
</span>
</a>

<a name="top">
<span onmouseover="showtip('어머 깜짝이야');" onmouseout="hidetip();">
<IMG src="그림2.gif" >
</span>
</a>

</BODY>
</HTML>