本來(lái)是要用ajax技術(shù)實(shí)現(xiàn)的頁(yè)面提示，就是把鼠標(biāo)放圖片上，就顯示相關(guān)的提示信息。因?yàn)橐獎(jiǎng)討B(tài)地顯示與圖片相關(guān)的提示信息，所以需要用ajax實(shí)現(xiàn)異步提取數(shù)據(jù)庫(kù)中的信息。
但是如果你需要顯示的是靜態(tài)的圖片相關(guān)信息，那就不需要用到ajax了，只用js就可以了，下面就是一個(gè)示例代碼：
<script language="javascript">...
var datatablebody;
var datadiv;
var curelement;
function getdetail()...{
datatablebody = document.getElementById("databody");
datadiv = document.getElementById("popup");
setdata(); //設(shè)置要顯示的數(shù)據(jù)
}
function setdata(data)...{
cleardata();
setoffsets();
var content = "你要顯示的提示信息";
var row = createrow(content); //創(chuàng)建一個(gè)tr
datatablebody.appendChild(row); //將創(chuàng)建的tr放入table中
}
function createrow(data)...{
var row,cell,txtnode;
row = document.createElement("tr"); //動(dòng)態(tài)生成一個(gè)tr
cell = document.createElement("td"); //動(dòng)態(tài)生成一個(gè)td
cell.setAttribute("bgcolor","#fffafa"); //設(shè)置背景顏色
cell.setAttribute("border","0"); //設(shè)置邊框大小
txtnode = document.createTextNode(data); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
cell.appendChild(txtnode); //將文本節(jié)點(diǎn)放入單元格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"; //設(shè)置要顯示提示框的左端位置
datadiv.style.top = top + "px"; //設(shè)置頂部位置
}
function cleardata()...{ //鼠標(biāo)移開(kāi)時(shí)，清除動(dòng)態(tài)生成的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 編輯過(guò)
400 186 1886
