js基础:js实现页面提示效果
|
admin
2010年8月18日 10:45
本文热度 5303
|
本来是要用ajax技术实现的页面提示，就是把鼠标放图片上，就显示相关的提示信息。因为要动态地显示与图片相关的提示信息，所以需要用ajax实现异步提取数据库中的信息。
但是如果你需要显示的是静态的图片相关信息，那就不需要用到ajax了，只用js就可以了，下面就是一个示例代码：
<script language="javascript">...
var datatablebody;
var datadiv;
var curelement;
function getdetail()...{
datatablebody = document.getElementById("databody");
datadiv = document.getElementById("popup");
setdata(); //设置要显示的数据
}
function setdata(data)...{
cleardata();
setoffsets();
var content = "你要显示的提示信息";
var row = createrow(content); //创建一个tr
datatablebody.appendChild(row); //将创建的tr放入table中
}
function createrow(data)...{
var row,cell,txtnode;
row = document.createElement("tr"); //动态生成一个tr
cell = document.createElement("td"); //动态生成一个td
cell.setAttribute("bgcolor","#fffafa"); //设置背景颜色
cell.setAttribute("border","0"); //设置边框大小
txtnode = document.createTextNode(data); //创建一个文本节点
cell.appendChild(txtnode); //将文本节点放入单元格cell
row.appendChild(cell); //将单元格cell放入生成的tr中
return row;
}
function setoffsets()...{
datadiv.style.border = "black 1px solid";
var top =0;
while(curelement)...{
top += curelement["offsettop"];
curelement = curelement.offsetparent;
}
datadiv.style.left = 50 + "px"; //设置要显示提示框的左端位置
datadiv.style.top = top + "px"; //设置顶部位置
}
function cleardata()...{ //鼠标移开时，清除动态生成的tr
var ind = datatablebody.childNodes.length;
for(var i = ind-1;i>=0;i--)...{
datatablebody.removeChild(datatablebody.childNodes[i]);
}
datadiv.style.border = "none";
}
</script>
<img src="eclipse.ico" onmouseover="getdetail();" onmouseout="cleardata();"/>
<div style="position:absolute;" id="popup">
<table bgcolor="#fffafa" border="0" cellpadding="2" cellspacing="2">
<tbody id="databody">
</tbody>
</div>
该文章在 2010/8/18 10:45:31 编辑过
400 186 1886
