鼠标上移显示文字的html

本文介绍了一种通过HTML和JavaScript实现的鼠标悬停显示提示文本的效果。该效果可在鼠标悬停于元素上时显示预设的文字说明,适用于网页导航、按钮提示等场景。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>非常不错的一款连接提示信息显示效果</title>
</head><body>
<!--将以下代码加入HTML的<Body></Body>之间-->

<script language="javascript">
function openUser(id) {
var Win = window.open("dispuser.asp?name="+id,"openScript");
}


function openScript(url, width, height){
var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=yes' );
}


function openDis(bid,rid,id){
self.location
="dispbbs.asp?boardid="+bid+"&RootID="+rid+"&id="+id
}


function PopWindow()
{
openScript(
'messanger.asp?action=newmsg',420,320);
}

var nn = !!document.layers;
var ie = !!document.all;

if (nn) {
netscape.security.PrivilegeManager.enablePrivilege(
"UniversalSystemClipboardAccess");
var fr=new java.awt.Frame();
var Zwischenablage = fr.getToolkit().getSystemClipboard();
}


function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}

}

}

</script>
<script Language="JavaScript">
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=2000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity
=99;

//***************内部变量定义*****************
sPop=null;
curShow
=null;
tFadeOut
=null;
tFadeIn
=null;
tFadeWaiting
=null;

document.write(
"<style type='text/css'id='defaultPopStyle'>");
document.write(
".cPopText { background-color: #FFFFFF;color:#000000; border: 1px #000000 solid;font-color: font-size: 10px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write(
"</style>");
document.write(
"<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");


function showPopupText(){
var o=event.srcElement;
MouseX
=event.x;
MouseY
=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop
=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop==""{
dypopLayer.innerHTML
="";
dypopLayer.style.filter
="Alpha()";
dypopLayer.filters.Alpha.opacity
=0;
}

else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow
=setTimeout("showIt()",tPopWait);
}


}

}


function showIt(){
dypopLayer.className
=popStyle;
dypopLayer.innerHTML
=sPop;
popWidth
=dypopLayer.clientWidth;
popHeight
=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left
=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top
=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter
="Alpha(Opacity=0)";
fadeOut();
}


function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity
+=showPopStep;
tFadeOut
=setTimeout("fadeOut()",1);
}

else {
dypopLayer.filters.Alpha.opacity
=popOpacity;
tFadeWaiting
=setTimeout("fadeIn()",tPopShow);
}

}


function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0{
dypopLayer.filters.Alpha.opacity
-=1;
tFadeIn
=setTimeout("fadeIn()",1);
}

}

document.onmouseover
=showPopupText;
</script>
<style type='text/css'id='defaultPopStyle'>
A:visited
{TEXT-DECORATION: none;Color:#000000}
A:active
{TEXT-DECORATION: none;Color:#000000}
A:hover
{TEXT-DECORATION: underline;Color:#000000}
A:link
{text-decoration: none;Color:#000000}
.t
{LINE-HEIGHT: 1.4}
BODY
{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR
: #9BDBDB;
SCROLLBAR-SHADOW-COLOR
: #9BDBDB;
SCROLLBAR-3DLIGHT-COLOR
: #9BDBDB;
SCROLLBAR-TRACK-COLOR
: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR
: #9BDBDB;
scrollbar-Base-Color
: #9BDBDB;
Color
:#000000
}

td, p, div, br
{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;Color:#000000;}
FORM
{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}
OPTION
{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}
INPUT
{BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9pt; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc; font-family: "宋体"; font-size: 12px}
textarea 
{border-width: 1; border-color: #000000; background-color: #efefef; font-family: "宋体"; font-size: 12px; font-style: bold;}
select 
{border-width: 1; border-color: #000000; background-color: #eeeeee; font-family: "宋体"; font-size: 12px; font-style: bold;}
</style>
<href="#" title="几千个网页特效<BR>网页美容专家<BR>轻轻松松为你的网页作美容<BR>欢迎您的光临 :)<BR>">网页特效</a>
</body></html>



鼠标上移显示文字的html 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值