漂亮的网页消息提示框<一>

来源：互联网发布：南京秦淮网络问政编辑：程序博客网时间：2024/04/29 06:06

在网页制作过程中,如果某个链接或组件在获得焦点时,需要一个提示框.可以直接加上 title 属性.

但如果对美观有要求,可以看下面列举的样式:

首先是页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

window.onload=function(){enableTooltips()};

</script>

</HEAD>

<BODY>

</BODY>

</HTML>

其次是JS代码,可以复制代码到保存到本地为BubbleTooltips.js:

/*Javascript for Bubble Tooltips by Alessandro Fulciniti

http://pro.html.it - http://web-graphics.com */

function enableTooltips(id){

var links,i,h;

if(!document.getElementById || !document.getElementsByTagName) return;

AddCss();

h=document.createElement("span");

h.id="btc";

h.setAttribute("id","btc");

h.style.position="absolute";

document.getElementsByTagName("body")[0].appendChild(h);

if(id==null) links=document.getElementsByTagName("a");

else links=document.getElementById(id).getElementsByTagName("a");

for(i=0;i<links.length;i++){

Prepare(links[i]);

}

function Prepare(el){

var tooltip,t,b,s,l;

t=el.getAttribute("title");

if(t==null || t.length==0) t="说明:";

el.removeAttribute("title");

tooltip=CreateEl("span","tooltip");

s=CreateEl("span","top");

s.appendChild(document.createTextNode(t));

tooltip.appendChild(s);

b=CreateEl("b","bottom");

l=el.getAttribute("href");

if(l.length>28) l=l.substr(0,25)+"...";

b.appendChild(document.createTextNode(l));

tooltip.appendChild(b);

setOpacity(tooltip);

el.tooltip=tooltip;

el.onmouseover=showTooltip;

el.onmouseout=hideTooltip;

el.onmousemove=Locate;

}

function showTooltip(e){

document.getElementById("btc").appendChild(this.tooltip);

Locate(e);

}

function hideTooltip(e){

var d=document.getElementById("btc");

if(d.childNodes.length>0) d.removeChild(d.firstChild);

}

function setOpacity(el){

el.style.filter="alpha(opacity:95)";

el.style.KHTMLOpacity="0.95";

el.style.MozOpacity="0.95";

el.style.opacity="0.95";

}

function CreateEl(t,c){

var x=document.createElement(t);

x.className=c;

x.style.display="block";

return(x);

}

function AddCss(){

var l=CreateEl("link");

l.setAttribute("type","text/css");

l.setAttribute("rel","stylesheet");

l.setAttribute("href","bt.css");

l.setAttribute("media","screen");

document.getElementsByTagName("head")[0].appendChild(l);

}

function Locate(e){

var posx=0,posy=0;

if(e==null) e=window.event;

if(e.pageX || e.pageY){

posx=e.pageX; posy=e.pageY;

}

else if(e.clientX || e.clientY){

if(document.documentElement.scrollTop){

posx=e.clientX+document.documentElement.scrollLeft;

posy=e.clientY+document.documentElement.scrollTop;

}

else{

posx=e.clientX+document.body.scrollLeft;

posy=e.clientY+document.body.scrollTop;

}

document.getElementById("btc").style.top=(posy+10)+"px";

document.getElementById("btc").style.left=(posx-20)+"px";

}

再次是样式,也可以复制到本地保存为BubbleTooltip.css:

/*CSS for Bubble Tooltips by Alessandro Fulciniti

- http://pro.html.it - http://web-graphics.com */

.tooltip{

width: 200px; color:#000;

font:lighter 11px/1.3 Arial,sans-serif;

text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;

background: url(http://hiphotos.baidu.com/zhoubenlei/pic/item/513404fb0bf389106d22eb0d.jpg) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;

background: url(http://hiphotos.baidu.com/zhoubenlei/pic/item/513404fb0bf389106d22eb0d.jpg) no-repeat bottom}