自定义Title(可以实现类似于携程网上价格的显示方式)

< html >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=gb2312">

< title > 自定义Title</title>

</ head >

< body >

< p >< B > 自定义Title</：把鼠标放在下面的文字上查看效果</p>B>(IE & FireFox...)

< span title="<marquee style='width:60px;'>http://blog.csdn.net/ivan__zhang</marquee>" altbg="red" altcolor="yellow" altborder="yellow"> 滚动字幕</span><br><br>

< span title="<img src='hot2.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC"> 图片</span><br><br>

<br>

< span title="<table><tr bgcolor='#F2F8FD'><td> 周一</td><td>周二</td></tr><tr><td><font color='red'>￥</font></td><td><font color='red'>￥</font></td></tr></table>" style="border-color:Green" altbg="#F3F3FA">ivanzhang</span>

< div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id="_altlayer"></div>

</html>

js实现
<script>

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;  //开始写得是evn.clientY-_oH(_OH是弹出框的高度)但当页面有上下滚动条时，最下面的数据的弹出框将会看不到。因此改成下面方法//---1解决*/
//-----1
     if   (document.documentElement   &&   document.documentElement.scrollTop)  
        theTop   =   document.documentElement.scrollTop;  
         else    
        theTop   =   document.body.scrollTop;
     _top=evn.clientY+theTop-_oH;     
//------1
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>