本来是要用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\"]; [Page]
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>