var x,y;
//这是一个通过AJAX取得提示信息的方法
function over(noteContent){
//记录事件发生时的鼠标位置
x = event.clientX;
y = event.clientY;
//显示工具提示
document.getElementById("tip").style.display = "block";
//显示工具提示的起始坐标
document.getElementById("tip").style.top = y;
document.getElementById("tip").left = x+10;
document.getElementById("tip").innerHTML="<table width=/"160/" border=/"0/" cellpadding=/"0/"" +
"cellspacing=/"0/" class=/"STYLE1/"><tr> <td>内容:"+noteContent+"</td> </tr></table>";
}
function out(){
document.getElementById("tip").style.display = "none";
}
获取多个参数
<script type="text/javascript">
var x,y;
//这是一个通过AJAX取得提示信息的方法
function over(btime,etime,departName,PuserName){
//记录事件发生时的鼠标位置
x = event.clientX;
y = event.clientY;
//显示工具提示
document.getElementById("tip").style.display = "block";
//显示工具提示的起始坐标
document.getElementById("tip").style.top = y;
document.getElementById("tip").left = x+10;
document.getElementById("tip").innerHTML="<table width=/"160/" border=/"0/" cellpadding=/"0/"" +
"cellspacing=/"0/" class=/"STYLE1/"><tr> <td>开始时间:"+btime+"</td> </tr><tr> <td>结束时间:"+etime+
"</td></tr><tr> <td>部门:"+departName+"</td></tr><tr> <td>预约人:"+PuserName+"</td></tr></table>";
}
function out(){
document.getElementById("tip").style.display = "none";
}
</script>
<a href="#" onMouseOver="over('${schedule.beginTime}','${schedule.endTime}','${schedule.departName}','${schedule.puserName}')"
onmouseout="out()"> ${schedule.title} </a>
<div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;background:#FFFFCC"></div>
使用AJAX实现工具提示
本文介绍了一种利用AJAX技术实现网页上鼠标悬停显示详细信息的方法。具体包括通过JavaScript记录鼠标位置,并动态显示包含特定信息的工具提示。此外还展示了如何为不同数量的信息参数定制工具提示内容。

被折叠的 条评论
为什么被折叠?



