鼠标事件控制div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>鼠标事件控制div</TITLE>
</HEAD>
<BODY>
<script>
function _show(obj){
var str = "<table width=100%><tr>"
+ "<td align='center'><a href='#' style='text-decoration:none'>办事指南</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>表格下载</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上咨询</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上申请</a></td>"
+ "<td align='center'><a href='#' style='text-decoration:none'>网上查询</a></td>"
+ "</tr></table>"
var pos = GetObjPos(obj);
document.getElementById("showMessage").style.left = pos.x ;
if(pos.y + obj.offsetHeight - 5 + 100 < document.body.offsetHeight){
document.getElementById("showMessage").style.top = pos.y + obj.offsetHeight - 5;
}else{
document.getElementById("showMessage").style.top = pos.y - 100;
}
document.getElementById("showMessage").innerHTML = str;
document.getElementById("showMessage").style.display="block";
}
function _disshow(){
document.getElementById("showMessage").style.display="none";
}
function CPos(x, y){
this.x = x;
this.y = y;
}
function GetObjPos(ATarget){
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target){
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent;
}
return pos;
}
</script>
<style type="text/css">
#showMessage {width:400px; height:30px; background-color:white; position:absolute; z-index:4;right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
</style>
<div id="showMessage" onmouseover="this.style.display='block';" onmouseout="this.style.display='none';">
</div>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a> <br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
<a href="#" style="text-decoration:none" onmouseover="_show(this,200);" onmouseout="_disshow()">显示</a><br>
</BODY>
</HTML>
