用javascript实现的tip效果
document.body.onmousemove
=
quickalt;
document.body.onmouseover = getalt;
document.body.onmouseout = restorealt;
var tempalt = '';
function getalt() {
if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && tempalt!=''))){
altlayer.style.left=event.x;
altlayer.style.top=event.y+20;
altlayer.style.display='';
tempalt=event.srcElement.title;
tempbg=event.srcElement.altbg;
tempcolor=event.srcElement.altcolor;
tempborder=event.srcElement.altborder;
event.srcElement.title='';
altlayer.innerHTML=tempalt;
if (typeof(tempbg)!="undefined"){altlayer.style.background=tempbg}else{altlayer.style.background="infobackground"}
if (typeof(tempcolor)!="undefined"){altlayer.style.color=tempcolor}else{altlayer.style.color=tempcolor="infotext"}
if (typeof(tempborder)!="undefined"){altlayer.style.border='1px solid '+tempborder;}else{altlayer.style.border='1px solid #000000';}
}
}
function quickalt() {
if(altlayer.style.display==''){
altlayer.style.left=event.x;
altlayer.style.top=event.y+10;
}
}
function restorealt() {
event.srcElement.title=tempalt;
tempalt='';
altlayer.style.display='none';
}
document.body.onmouseover = getalt;
document.body.onmouseout = restorealt;
var tempalt = '';
function getalt() {
if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && tempalt!=''))){
altlayer.style.left=event.x;
altlayer.style.top=event.y+20;
altlayer.style.display='';
tempalt=event.srcElement.title;
tempbg=event.srcElement.altbg;
tempcolor=event.srcElement.altcolor;
tempborder=event.srcElement.altborder;
event.srcElement.title='';
altlayer.innerHTML=tempalt;
if (typeof(tempbg)!="undefined"){altlayer.style.background=tempbg}else{altlayer.style.background="infobackground"}
if (typeof(tempcolor)!="undefined"){altlayer.style.color=tempcolor}else{altlayer.style.color=tempcolor="infotext"}
if (typeof(tempborder)!="undefined"){altlayer.style.border='1px solid '+tempborder;}else{altlayer.style.border='1px solid #000000';}
}
}
function quickalt() {
if(altlayer.style.display==''){
altlayer.style.left=event.x;
altlayer.style.top=event.y+10;
}
}
function restorealt() {
event.srcElement.title=tempalt;
tempalt='';
altlayer.style.display='none';
}
这个得加在</body>结束标签的前面
<
body
>
< span title ="不错啊" > 默认效果 </ span >
< div style ="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id =altlayer ></ div >
<!--注意这个引入必须在下面-->
<script type="text/javascript" src="../js/tip.js"></script>
</ body >
这里面的效果层就是这个div.
< span title ="不错啊" > 默认效果 </ span >
< div style ="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id =altlayer ></ div >
<!--注意这个引入必须在下面-->
<script type="text/javascript" src="../js/tip.js"></script>
</ body >
在想要应用 tip的文字上面加个<span></span>标签即可