如何實現網頁上的氣球提示
工作一直壓得喘不過氣來,也好久沒搜集.Net之外得東西了,作為一個程序開發人員,我經常羨慕那些界面上非常友好得網頁,感覺一個人性化得界面也是贏取用戶歡迎得最直接得方法,在開發window應用程序那會,經常遇到氣球提示等問題,解決起來比較麻煩,今天在經典論壇轉了下,發現了一個在網頁上實現氣球提示得好辦法:基本原理就是用浮動層來顯示提示信息,然后在層里面通過添加圖片和背景圖片來實現氣球得效果。然后用js控制顯示:
<script>
<!--設置在頁面上鼠標經過得事件為quickalt-->
document.body.onmousemove=quickalt;
<!--顯示提示框方法,這個方法能讓alt提示立即出現,而不是停留一段時間-->
function quickalt() {
if (event.srcElement.hint)
{
event.srcElement.alt=event.srcElement.hint;
}
if(event.srcElement.alt) {
if(event.srcElement.alt!='')
{
event.srcElement.hint=event.srcElement.alt;
altlayer.style.visibility='visible';
altlayer.style.left=event.x-1;
altlayer.style.top=event.y+20;
alttext.innerHTML=event.srcElement.hint
event.srcElement.alt="";
}
}
else altlayer.style.visibility='hidden';}
</script>
以下是用于顯示提示得div
<div style="position:absolute;visibility:hidden" id="altlayer">
<table id="divtb" border="0" cellspacing="0" cellpadding="0">
<tr height="5px">
<td width="2px"><img src="../Images/tooltip/tl.gif"/></td>
<td background="../Images/tooltip/tm.gif"></td>
<td width="2px"><img src="../Images/tooltip/tr.gif"/></td>
</tr>
<tr>
<td style="border-left:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
<td id="alttext" style="font-size:12px;padding:0 3px 0 3px;background-color:white;"></td>
<td style="border-right:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
</tr>
<tr height="2px">
<td width="2px"><img src="../Images/tooltip/bl.gif"/></td>
<td style="border-bottom:1px solid #666;background-color:white;"><img height="1px" width="1px"/></td>
<td width="2px"><img src="../Images/tooltip/br.gif"/></td>
</tr>
</table>
</div>
這樣在網頁中有<a href="#" alt="你好">您好</a>就可以出現氣球提示了!
出處:http://jillzhang.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

浙公網安備 33010602011771號