|
在网页中有时我们将鼠标移到图片上或者文字链接处会出现文字型的提示信息一般制作这样的效果极为简单只需在图片代码中加入<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就可以制作出效果我们这里就不进行详细的介绍了使用过程中有什么疑问可在我们留言本进行咨询！ |
