div层上显示提示信息

最新推荐文章于 2023-04-01 21:17:05 发布

yinchunjian

最新推荐文章于 2023-04-01 21:17:05 发布

阅读量2.1k

点赞数

文章标签： XHTML HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script language="javascript">
var width = "80";
var height = ""
//设置层显示坐标
var offsetx = 2;
var offsety = 16;
var x = 0;
var y = 0;
var show = false;//判断是否显示层
var dStyle;//设置层的样式
document.onmousemove = mEvn;//作用重绘 document.onmousemove获取窗体的所有鼠标移动事件

//鼠标移动到目标对象上显示提示该方法只会在鼠标移动到目标对象上时只执行一次之后转到 mEvn()执行该函数中的内容
function mOvr() {
dStyle = detail.style;//获取层的样式对象
var obj = window.event.srcElement;//获取触发事件的对象
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "background-color:#C0D0E8";
}
var s;//提示的内容
s = "<table border=\"1\" width=\"80\" id =\"tip\" bordercolor=\"#C7D0D2\" bgcolor=\"#ffffff\" cellpadding=\"0\" cellspacing=\"0\"><TR><td>" + "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>提示信息</TABLE></TABLE>";
//document.all["detail"].innerHTML = s; //document.all["detail"]返回对象所包含id为detail的元素集合的引用。
detail.innerHTML = s;
if(show == false){
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}
if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}

dStyle.visibility = "visible";
show = true;
}

}
//鼠标移开触发该事件该方法只会在鼠标移走目标对象上时只执行一次
function mOut() {
var obj = window.event.srcElement;
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "";
}
show = false;
dStyle.visibility = "hidden";
}
//整个窗体上的移动事件都将执行该方法
function mEvn() {
x = event.x;
y = event.y;
if (document.body.scrollLeft) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
if (show) {
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}

if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}
}
}
/*
//下面俩个只是测试用的
function test1(){
alert(test.value);//可以直接通过id名称来调用一个对象其功能相当于 document.getElementById("test");
}
function test2(){
for(i = 0; i < document.all.length; i++){//获取页面所有元素包含隐藏的元素
alert(document.all(i).tagName);
}
}*/
</script>
</head>
<body οnlοad="">
<div id="detail" style="POSITION: absolute" title="ddd"></div>
<table>
<tr>
<td onMouseOver="mOvr()" onMouseOut="mOut()" style="cursor:hand">
提示信息
</td>
<td><input type="text" value="22" id="test" /> <font onMouseOver="mOvr()" onMouseOut="mOut()">测试</font></td>
</tr>
</table>
</body></html>

yinchunjian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div层上显示提示信息

var width = "80";var height = ""//设置层显示坐标var offsetx = 2;var offsety = 16;var x = 0;var y = 0;var show = false;//判断是否显示层var dStyle;//设置层的样式document.onmousemove = mEvn;//作用重绘 ...
复制链接

扫一扫