마우스에 붙어다니는 레이어 소스

# 설명글 레이어

 

<p align="center"><script>
<!--
function msgposit(){
message.style.posLeft = event.x - 20 + document.body.scrollLeft
message.style.posTop = event.y + 20 + document.body.scrollTop
}
function msgset(str){
var text
text ='<table border=0 cellpadding=6 cellspacing=0 bgcolor=orange style="font-size:9pt; border-width:1; border-color:black; border-style:solid;" width=300 height=26>'
text += '<tr><td align=center><font color=white><b>' + str + '</b></font></td></tr></table>'
message.innerHTML=text
}
function msghide(){
message.innerHTML=''
//message.style.visibility='hidden'
}
//-->
</script>
<div id="message" style="border-width:1px; border-style:none; width:200px; height:18px; position:absolute; left:83px; top:4px; z-index:1;">
    <p>&nbsp;</p>
</div>

<A HREF='#' onmousemove="msgposit()" onmouseout="msghide();window.status=('');return true;" onmouseover="msgset('동해물과 백두산이 마르고 닳도록');return true;">애국가</a>

 

 

 

 

# jquery

 

<script>
function on_open(){

 $(".here").mousemove(function(e) {

  var top = e.pageY - 15;
  var left = e.pageX + 20;

  $("#vc").css({"left":left, "top":top}).show();

 });

}

function on_close(){
  $("#vc").hide();
}

</script>

<div id='vc' style='width:200px;height:200px;background-color:#FFCC00;position:absolute;display:none;'></div>
<p><font class='here' onmouseover="on_open();" onmouseout="on_close();">마우스설명레이어</font></p>