自定义title样式同时支持firefox ie

2009-11-11 文章来源：互联网浏览次数：1331 分享文章

第一种方法：

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>自定义title - azhong.com</title> 
</head> 
<body > 
<p><B>自定义title</B>(IE & FireFox...)：把鼠标放在下面的文字上查看效果</p> 
<span title="Javascript" title="">默认效果</span><br><br> 
<span title="<marquee style='width:60px;'>www.azhong.com</marquee>" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕</span><br><br> 
<span title="<img src='http://www.azhong.com/azhong.com.logo.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">图片</span><br><br> 
<span title="<i style='font-size:18pt;font-family:verdana;'>welcome to <font color='yellow'>www.azhong.com</font></i>" altbg="green" altcolor="black" altborder="darkgreen">大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体</span><br><br> 
<div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id="_altlayer"></div> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
document.body.onmousemove=quickalt; 
document.body.onmouseover=getalt; 
document.body.onmouseout=restorealt; 
var tempalt=''; 
 
var UA=navigator.userAgent.toLowerCase(); 
var ISIE=(UA.indexOf("msie") > 0); 
function $(hw_){return document.getElementById(hw_);} 
 
function _Move(evn,o){ 
    _bW=document.body.clientWidth; 
    _left1=document.body.scrollLeft+evn.clientX+10; 
    _oW=o.offsetWidth; 
    _left=((evn.clientX+_oW)>_bW)?(_left1-_oW-10):_left1; 
    if((evn.clientX+_oW)>_bW){_left=(_oW<evn.clientX)?(_left1-_oW-10):_left1;} 
 
    _bH=document.body.clientHeight; 
    _top1=document.body.scrollTop+evn.clientY+6; 
    _oH=o.offsetHeight; 
    _top=((evn.clientY+_oH)>_bH)?(_top1-_oH-6):_top1; 
    if((evn.clientY+_oH)>_bH){_top1=(_oH<evn.clientY)?(_top1-_oH-6):_top1;} 
    o.style.left=_left; 
    o.style.top=_top; 
} 
 
function getalt(hw_){ 
    if(ISIE){evn=event}else{evn=hw_} 
    var eo = evn.srcElement?evn.srcElement:evn.target; 
    if(eo.title && (eo.title!=""|| (eo.title=="" && tempalt!=""))){ 
        o = $("_altlayer"); 
        _Move(evn,o); 
        o.style.display=''; 
        tempalt=eo.title; 
        tempbg=eo.getAttribute("altbg"); 
        tempcolor=eo.getAttribute("altcolor"); 
        tempborder=eo.getAttribute("altborder"); 
        eo.title=''; 
        o.innerHTML=tempalt; 
        if (tempbg!=null){o.style.background=tempbg}else{o.style.background="infobackground"} 
        if (tempcolor!=null){o.style.color=tempcolor}else{o.style.color=tempcolor="infotext"} 
        if (tempborder!=null){o.style.border="1px solid "+tempborder;}else{o.style.border="1px solid #000000";} 
    } 
} 
function quickalt(hw_){ 
    if(ISIE){evn=event}else{evn=hw_} 
    o = $("_altlayer"); 
    if(o.style.display==""){ 
        _Move(evn,o); 
    } 
} 
function restorealt(hw_){ 
    if(ISIE){evn=event}else{evn=hw_} 
    var eo = evn.srcElement?evn.srcElement:evn.target; 
    eo.title=tempalt; 
    tempalt=""; 
    $("_altlayer").style.display="none"; 
} 
//--> 
</SCRIPT> 
 
</body> 
</html> 
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自定义title - azhong.com</title>
</head>
<body >
<p><B>自定义title</B>(IE & FireFox...)：把鼠标放在下面的文字上查看效果</p>
<span title="Javascript" title="">默认效果</span><br><br>
<span title="<marquee style='width:60px;'>www.azhong.com</marquee>" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕</span><br><br>
<span title="<img src='http://www.azhong.com/azhong.com.logo.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">图片</span><br><br>
<span title="<i style='font-size:18pt;font-family:verdana;'>welcome to <font color='yellow'>www.azhong.com</font></i>" altbg="green" altcolor="black" altborder="darkgreen">大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体大字体</span><br><br>
<div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id="_altlayer"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.body.onmousemove=quickalt;
document.body.onmouseover=getalt;
document.body.onmouseout=restorealt;
var tempalt='';

var UA=navigator.userAgent.toLowerCase();
var ISIE=(UA.indexOf("msie") > 0);
function $(hw_){return document.getElementById(hw_);}

function _Move(evn,o){
    _bW=document.body.clientWidth;
    _left1=document.body.scrollLeft+evn.clientX+10;
    _oW=o.offsetWidth;
    _left=((evn.clientX+_oW)>_bW)?(_left1-_oW-10):_left1;
    if((evn.clientX+_oW)>_bW){_left=(_oW<evn.clientX)?(_left1-_oW-10):_left1;}

    _bH=document.body.clientHeight;
    _top1=document.body.scrollTop+evn.clientY+6;
    _oH=o.offsetHeight;
    _top=((evn.clientY+_oH)>_bH)?(_top1-_oH-6):_top1;
    if((evn.clientY+_oH)>_bH){_top1=(_oH<evn.clientY)?(_top1-_oH-6):_top1;}
    o.style.left=_left;
    o.style.top=_top;
}

function getalt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    var eo = evn.srcElement?evn.srcElement:evn.target;
    if(eo.title && (eo.title!=""|| (eo.title=="" && tempalt!=""))){
        o = $("_altlayer");
        _Move(evn,o);
        o.style.display='';
        tempalt=eo.title;
        tempbg=eo.getAttribute("altbg");
        tempcolor=eo.getAttribute("altcolor");
        tempborder=eo.getAttribute("altborder");
        eo.title='';
        o.innerHTML=tempalt;
        if (tempbg!=null){o.style.background=tempbg}else{o.style.background="infobackground"}
        if (tempcolor!=null){o.style.color=tempcolor}else{o.style.color=tempcolor="infotext"}
        if (tempborder!=null){o.style.border="1px solid "+tempborder;}else{o.style.border="1px solid #000000";}
    }
}
function quickalt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    o = $("_altlayer");
    if(o.style.display==""){
        _Move(evn,o);
    }
}
function restorealt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    var eo = evn.srcElement?evn.srcElement:evn.target;
    eo.title=tempalt;
    tempalt="";
    $("_altlayer").style.display="none";
}
//-->
</SCRIPT>

</body>
</html>

--------------------------------------------------------------------

第二种方法：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>根据鼠标的位置显示自定义提示-来自www.idcsrv.cn</title> 
<script language='javascript' type="text/javascript"> 
function showdiv(objstr,str,ev) 
{//根据鼠标位置显示对象,参数ev为event 
var ObjX,ObjY;//对象的位置(x,y) 
var mouseX=10;//对象的(x)水平位置距离鼠标的宽度 
var mouseY=-2;//对象的(y)垂直位置距离鼠标的高度 
var obj = document.getElementById(objstr); 
obj.style.display=str;//显示或隐藏对象 
if(str == "") 
{     
if(ev.pageX || ev.pageY) 
{//firefox鼠标的位置 
   ObjX = ev.pageX; 
   ObjY = ev.pageY; 
} 
else
{//IE鼠标的位置   
 
//以下两行为旧标准支持 
   //ObjX = ev.clientX + document.body.scrollLeft- document.body.clientLeft; 
   //ObjY = ev.clientY + ddocument.body.scrollTop - document.body.clientTop;     
//以下两行为新标准支持 
   ObjX = ev.clientX + document.documentElement.scrollLeft- document.body.clientLeft; 
   ObjY = ev.clientY + document.documentElement.scrollTop - document.body.clientTop; 
} 
ObjX = ObjX + mouseX; 
ObjY = ObjY - mouseY; 
obj.style.left = ObjX + 'px'; 
obj.style.top = ObjY + 'px';    
} 
} 
</script> 
<style type="text/css"> 
.div1{ 
position:absolute; 
border:1px #DFDFDF solid; 
background-color:#FFFFFF; 
line-height:180%; 
width:100px; 
font-size:12px; 
padding:3px; 
z-index:10001; 
filter:alpha(opacity=90);/*设置透明度*/
-moz-opacity:0.9;/*Firefox设置透明度*/
} 
* {font-size:12px;} 
.div1 p{margin:0px;} 
ul{margin:0px; padding:0px;} 
li{margin:0px; padding:0 0 0 2px; height:25px; display:inline} 
</style>  
</head> 
<body> 
<ul> 
<li><a href="#" onmousemove="showdiv('divalt1','',event)" onmouseover="showdiv('divalt1','',event)" onmouseout="showdiv('divalt1','none')">显示div1显示div1显示div1</a></li> 
<div id="divalt1" class="div1" style="display:none">显示div1<br />显示div1<br />显示div1<br />显示div1</div> 
<li><a href="#" onmousemove="showdiv('divalt2','',event)" onmouseover="showdiv('divalt2','',event)" onmouseout="showdiv('divalt2','none')">显示div2显示div2显示div2</a></li> 
<div id="divalt2" class="div1" style="display:none">显示div2<br />显示div2<br />显示div2</div> 
<li><a href="#" onmousemove="showdiv('divalt3','',event)" onmouseover="showdiv('divalt3','',event)" onmouseout="showdiv('divalt3','none')">显示div3显示div3显示div3</a></li> 
<div id="divalt3" class="div1" style="display:none">显示div3<br />显示div3<br />显示div3</div> 
<li><a href="#" onmousemove="showdiv('divalt4','',event)" onmouseover="showdiv('divalt4','',event)" onmouseout="showdiv('divalt4','none')">显示div4显示div4显示div4</a></li> 
<div id="divalt4" class="div1" style="display:none">显示div4<br />显示div4<br />显示div4</div> 
</ul> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>根据鼠标的位置显示自定义提示-来自www.idcsrv.cn</title>
<script language='javascript' type="text/javascript">
function showdiv(objstr,str,ev)
{//根据鼠标位置显示对象,参数ev为event
var ObjX,ObjY;//对象的位置(x,y)
var mouseX=10;//对象的(x)水平位置距离鼠标的宽度
var mouseY=-2;//对象的(y)垂直位置距离鼠标的高度
var obj = document.getElementById(objstr);
obj.style.display=str;//显示或隐藏对象
if(str == "")
{    
if(ev.pageX || ev.pageY)
{//firefox鼠标的位置
   ObjX = ev.pageX;
   ObjY = ev.pageY;
}
else
{//IE鼠标的位置  

//以下两行为旧标准支持
   //ObjX = ev.clientX + document.body.scrollLeft- document.body.clientLeft;
   //ObjY = ev.clientY + ddocument.body.scrollTop - document.body.clientTop;    
//以下两行为新标准支持
   ObjX = ev.clientX + document.documentElement.scrollLeft- document.body.clientLeft;
   ObjY = ev.clientY + document.documentElement.scrollTop - document.body.clientTop;
}
ObjX = ObjX + mouseX;
ObjY = ObjY - mouseY;
obj.style.left = ObjX + 'px';
obj.style.top = ObjY + 'px';   
}
}
</script>
<style type="text/css">
.div1{
position:absolute;
border:1px #DFDFDF solid;
background-color:#FFFFFF;
line-height:180%;
width:100px;
font-size:12px;
padding:3px;
z-index:10001;
filter:alpha(opacity=90);/*设置透明度*/
-moz-opacity:0.9;/*Firefox设置透明度*/
}
* {font-size:12px;}
.div1 p{margin:0px;}
ul{margin:0px; padding:0px;}
li{margin:0px; padding:0 0 0 2px; height:25px; display:inline}
</style> 
</head>
<body>
<ul>
<li><a href="#" onmousemove="showdiv('divalt1','',event)" onmouseover="showdiv('divalt1','',event)" onmouseout="showdiv('divalt1','none')">显示div1显示div1显示div1</a></li>
<div id="divalt1" class="div1" style="display:none">显示div1<br />显示div1<br />显示div1<br />显示div1</div>
<li><a href="#" onmousemove="showdiv('divalt2','',event)" onmouseover="showdiv('divalt2','',event)" onmouseout="showdiv('divalt2','none')">显示div2显示div2显示div2</a></li>
<div id="divalt2" class="div1" style="display:none">显示div2<br />显示div2<br />显示div2</div>
<li><a href="#" onmousemove="showdiv('divalt3','',event)" onmouseover="showdiv('divalt3','',event)" onmouseout="showdiv('divalt3','none')">显示div3显示div3显示div3</a></li>
<div id="divalt3" class="div1" style="display:none">显示div3<br />显示div3<br />显示div3</div>
<li><a href="#" onmousemove="showdiv('divalt4','',event)" onmouseover="showdiv('divalt4','',event)" onmouseout="showdiv('divalt4','none')">显示div4显示div4显示div4</a></li>
<div id="divalt4" class="div1" style="display:none">显示div4<br />显示div4<br />显示div4</div>
</ul>
</body>
</html>

上一篇：MSN、腾讯QQ、SKYPE、阿里旺旺网页在线客服源代码

下一篇：div垂直居中的几种办法

自定义title样式 同时支持firefox ie

文章评论(查看全部)

自定义title样式同时支持firefox ie