添加QQ在线功能

在网页上添加QQ在线功能：

<style>
H2 {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}
UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}
LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}
A:hover {
    COLOR: #000000
}
A {
    FONT-SIZE: 12px; COLOR: #696969; TEXT-DECORATION: none
}
.QQbox {
    Z-INDEX: 99; RIGHT: 0px; WIDTH: 178px; POSITION: absolute; TOP: 40px
}
.QQbox .press {
    RIGHT: 0px; WIDTH: 33px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; HEIGHT: 158px; BORDER-BOTTOM-STYLE: none
}
.QQbox .Qlist {
    BACKGROUND: url(images/qq/qq_listbg.gif) repeat-y -155px 0px; LEFT: 0px; WIDTH: 145px; POSITION: absolute
}
.QQbox .Qlist .t {
    FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px
}
.QQbox .Qlist .b {
    FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px
}
.QQbox .Qlist .t {
    BACKGROUND: url(images/qq/qq_listbg.gif) no-repeat left 50%
}
.QQbox .Qlist .b {
    BACKGROUND: url(images/qq/qq_listbg.gif) no-repeat right 50%
}
.QQbox .Qlist .con {
    BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 90%
}
.QQbox .Qlist .con H2 {
    BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(images/qq/qq_listbg.gif) repeat-y -163px 0px; FONT: bold 12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px solid; HEIGHT: 22px; TEXT-ALIGN: center
}
.QQbox .Qlist .con UL {
    
}
.QQbox .Qlist .con UL LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; HEIGHT: 20px
}
.QQbox .Qlist .con UL LI.odd {
    BACKGROUND: #fff
}
</style>
<div class='QQbox' id='divQQbox' >
     <div class='Qlist' id='divOnline' onmouseout='hideMsgBox(event);' style='display : none;'>
         <div class='t'></div>
         <div class='con'> 
             <h2>在线客服</h2>
             <ul>
                 <li class=odd><a href=' http://wpa.qq.com/msgrd?V=1&amp;Uin=1234567890&amp;Site=懒人图库欢迎您&amp;Menu=yes' target='_blank'><img src=' http://wpa.qq.com/pa?p=1:123456789:4'  border='0' alt='QQ' />商城客服</a></li>
                 <li><a href=' http://wpa.qq.com/msgrd?V=1&amp;Uin=123456789&amp;Site=懒人图库欢迎您&amp;Menu=yes' target='_blank'><img src=' http://wpa.qq.com/pa?p=1:858854788:4'  border='0' alt='QQ' />商城售后</a></li>
                 <tr><td>
                 <li>
                 <a target="_blank" 
                 href="http://amos.im.alisoft.com/msg.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" >
                 <img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" alt="懒人图库欢迎您" />
                 </a></li></td></tr>
                 <!--tr><td>
                 <li>
                 <a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA%97&site=cntaobao&s=1&charset=utf-8" >
                 <img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA%97&site=cntaobao&s=1&charset=utf-8" alt="懒人图库欢迎您" />
                 </a>
                 </li>
                 </td>
                 </tr-->
             </ul>
         </div>
         <div class='b'></div>
     </div>
     <div id='divMenu' onmouseover='OnlineOver();'><img src='./images/qq/qq_1.png' class='press' alt='QQ客服热线'></div>
</div>
<script>
var tips; var theTop = 40/*这是默认高度,越大越往下*/; var old = theTop;
function initFloatTips() {
tips = document.getElementById('divQQbox');
moveTips();
};

function moveTips() {
var tt=50;
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (document.body) {
pos = document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if (pos < theTop) pos = theTop;
if (pos != old) {
tips.style.top = pos+"px";
tt=10;
}
old = pos;
setTimeout(moveTips,tt);
}
initFloatTips();
function OnlineOver(){
document.getElementById("divMenu").style.display = "none";
document.getElementById("divOnline").style.display = "block";
document.getElementById("divQQbox").style.width = "145px";
}
function OnlineOut(){
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}
function hideMsgBox(theEvent){ //theEvent用来传入事件，Firefox的方式
　 if (theEvent){
　 var browser=navigator.userAgent; //取得浏览器属性
　 if (browser.indexOf("Firefox")>0){ //如果是Firefox
　　 if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素
　　 return; //结束函式
} 
} 
if (browser.indexOf("MSIE")>0){ //如果是IE
if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素
return; //结束函式
}
}
}

/*要执行的操作*/
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}
</script>