制作類似於Title、ALT的提示效果

在網頁中有時我們將鼠標移到圖片上或者文字鏈接處會出現文字型的提示信息一般制作這樣的效果極為簡單只需在圖片代碼中加入<Alt=文字提示信息>或者在文字鏈接代碼中加入<Title=文字提示信息>仔細觀察一下感覺出現的信息總有時間上的停頓如何制作類似於網頁教學網首頁文字超鏈接的提示信息的效果呢？

制作方法一加入JS代碼
在頁面的<head></head>中加入JS代碼
<script language=javascript>
var tipTimer;
function locateObject(n d) { //v
var pix; if(!d) d=document; if((p=nindexOf(?))>&&parentframeslength) {
d=parentframes[nsubstring(p+)]document; n=nsubstring(p);}
if(!(x=d[n])&&dall) x=dall[n]; for (i=;!x&&i<dformslength;i++) x=dforms[i][n];
for(i=;!x&&dlayers&&i<dlayerslength;i++) x=locateObject(ndlayers[i]document); return x;
}

function hideTooltip(object)
{
if (documentall)
{
locateObject(object)stylevisibility=hidden
locateObject(object)styleleft = ;
locateObject(object)styletop = ;
return false
}
else if (documentlayers)
{
locateObject(object)visibility=hide
locateObject(object)left = ;
locateObject(object)top = ;
return false
}
else
return true
}

function showTooltip(objecte tipContent backcolor bordercolor textcolor displaytime)
{
windowclearTimeout(tipTimer)

if (documentall)
{
locateObject(object)styletop=documentbodyscrollTop+eventclientY+

locateObject(object)innerHTML=<table width= border= cellspacing= cellpadding=><tr><td nowrap><font >+unescape(tipContent)+</font></td></tr></table>

if ((ex + locateObject(object)clientWidth) > (documentbodyclientWidth + documentbodyscrollLeft))
{
locateObject(object)styleleft = (documentbodyclientWidth + documentbodyscrollLeft) locateObject(object)clientWidth;
}
else
{
locateObject(object)styleleft=documentbodyscrollLeft+eventclientX
}
locateObject(object)stylevisibility=visible
tipTimer=windowsetTimeout(hideTooltip(+object+) displaytime);
return true;
}
else if (documentlayers)
{
locateObject(object)documentwrite(<table width= border= cellspacing= cellpadding=><tr bgcolor=+bordercolor+><td><table width= border= cellspacing= cellpadding=><tr bgcolor=+backcolor+><td nowrap><font >+unescape(tipContent)+</font></td></tr></table></td></tr></table>)
locateObject(object)documentclose()
locateObject(object)top=ey+

if ((ex + locateObject(object)clipwidth) > (windowpageXOffset + windowinnerWidth))
{
locateObject(object)left = windowinnerWidth locateObject(object)clipwidth;
}
else
{
locateObject(object)left=ex;
}
locateObject(object)visibility=show
tipTimer=windowsetTimeout(hideTooltip(+object+) displaytime);
return true;
}
else
{
return true;
}
}
</script>
注意紅色字體部分可以對出現的提示信息進行字體的格式化與提示框的控制不包括對文字顏色的修改
在<body></body>中插入代碼
<div id=dHTMLToolTip ></div>
在文字超鏈接處加入代碼
onMouseOver=showTooltip(dHTMLToolTipevent 文字提示信息部分 #fffff##) onMouseOut=hideTooltip(dHTMLToolTip)
紅色字體部分為你需加注的提示信息內容
注意加粗部分
#fffff為彈出信息框的背景色
#為彈出信息框的邊框顏色
#為提示信息的文字顏色
為控制的顯示時間

制作方法二使用dHTML Tooltip插件
如果感覺使用代碼繁煩的話可以借助DW中的dHTML Tooltip插件制作就更為方便快捷了下載後使用插件管理器安裝然後選擇對象在行為窗口選擇Tooltip就可以制作出效果我們這裡就不進行詳細的介紹了使用過程中有什麼疑問可在我們留言本進行咨詢！

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19516.html