js实现页面提示效果

本来是要用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>