在网页中,有时我们将鼠标移到图片上,或者文字链接处,会出现文字型的提示信息。一般制作这样的效果极为简单,只需在图片代码中加入
制作方法一:加入js代码
1、在页面的
中加入js代码:var tiptimer;
function locateobject(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexof(?))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i for(i=0;!x&&d.layers&&i } function hidetooltip(object) { if (document.all) { locateobject(object).style.visibility=hidden locateobject(object).style.left = 1; locateobject(object).style.top = 1; return false } else if (document.layers) { locateobject(object).visibility=hide locateobject(object).left = 1; locateobject(object).top = 1; return false } else return true } function showtooltip(object,e, tipcontent, backcolor, bordercolor, textcolor, displaytime) { window.cleartimeout(tiptimer) if (document.all) { locateobject(object).style.top=document.body.scrolltop+event.clienty+20 locateobject(object).innerhtml=' if ((e.x + locateobject(object).clientwidth) > (document.body.clientwidth + document.body.scrollleft)) { locateobject(object).style.left = (document.body.clientwidth + document.body.scrollleft) - locateobject(object).clientwidth-10; } else { locateobject(object).style.left=document.body.scrollleft+event.clientx } locateobject(object).style.visibility=visible tiptimer=window.settimeout(hidetooltip('+object+'), displaytime); return true; } else if (document.layers) { locateobject(object).document.write('
''+unescape(tipcontent)+'
')'+unescape(tipcontent)+'
locateobject(object).document.close()
locateobject(object).top=e.y+20
if ((e.x + locateobject(object).clip.width) > (window.pagexoffset + window.innerwidth))
{
locateobject(object).left = window.innerwidth - locateobject(object).clip.width-10;
}
else
{
locateobject(object).left=e.x;
}
locateobject(object).visibility=show
tiptimer=window.settimeout(hidetooltip('+object+'), displaytime);
return true;
}
else
{
return true;
}
}
注意红色字体部分,可以对出现的提示信息进行字体的格式化与提示框的控制,不包括对文字颜色的修改。
2、在
中插入代码:3、在文字超链接处加入代码:
onmouseover=showtooltip('dhtmltooltip',event, '文字提示信息部分', '#fffff2','#000000','#000000','20000') onmouseout=hidetooltip('dhtmltooltip')
红色字体部分为你需加注的提示信息内容;
注意加粗部分:
#fffff2为弹出信息框的背景色;
#000000为弹出信息框的边框颜色;
#000000为提示信息的文字颜色;
20000为控制的显示时间。