仿126邮箱标签,该怎么处理 _JavaScript

仿126邮箱标签
欢迎各位多批评指正，以能够完善

演示
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
    var isIE = (document.all) ? true : false;

    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    var Class = {
        create: function() {
            return function() { this.Init.apply(this, arguments); }
        }
    }

    var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }

    var Bind = function(object, fun) {
        var args = Array.prototype.slice.call(arguments,2);
        return function() {
            return fun.apply(object, args);
        }
    }

    var BindAsEventListener = function(object, fun) {
        var args = Array.prototype.slice.call(arguments,2);
        return function(event) {
            return fun.apply(object, [event || window.event].concat(args));
        }
    }

    var CurrentStyle = function(element){
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    }

    function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };

    function removeEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.removeEventListener) {
            oTarget.removeEventListener(sEventType, fnHandler, false);
        } else if (oTarget.detachEvent) {
            oTarget.detachEvent("on" + sEventType, fnHandler);
        } else { 
            oTarget["on" + sEventType] = null;
        }
    };

  </script>
  <style type="text/css">
    a{
        underline:none;
    }

    #header{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
        background-repeat: repeat-x;
        background-position: 0px 0px;
        position: relative;
        width:800px;
        height:63px;
    }
    #menu{
        white-space:nowrap;
        height:28px;
        width:700px;
        position:absolute;
        bottom: 6px;
        left: 50px;
        overflow:hidden;
        white-space:nowrap;
    }
    #menu div{
        float: left;
        clear: right;
        cursor: pointer;
    }
    #menu div table{
        border: 0px;
        padding: 0px;
        margin: 0px;
    }

    #menu div table td{
        height: 30px;
        text-align: left;
        vertical-align: bottom;
        padding-top: 2px;
        line-height : 28px;
    }

    .AtdL{
        width:5px;
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
        background-repeat: no-repeat;
        background-position: -457px -58px;
    }

    .AtdM{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
        background-repeat: repeat-x;
        background-position: 0px -181px;
        font-family: 宋体;
        font-size: 13px;
        font-weight: bold;
        color: #FFFFFF;
    }

    .AtdR{
        width: 5px;
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
        background-repeat: no-repeat;
        background-position: -471px -58px;
    }

    .ItdL{
        width:6px;
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
        background-repeat: no-repeat;
        background-position: -456px -16px;
    }

    .ItdM{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
        background-repeat: repeat-x;
        background-position: 0px -139px;
        font-family: 宋体;
        font-size: 13px;
        font-weight: bold;
        color: #669EBA;
    }

    .ItdR{
        width: 7px;
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
        background-repeat: no-repeat;
        background-position: -471px -16px;
    }

    #menu table td a
    {
        display: block;
        height: 15px;
        width: 15px;
        padding-bottom: 3px;
    }

    .AtdM a{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f3.gif');
        background-repeat: no-repeat;
        background-position: -159px -100px;
    }

    .AtdM a:hover{
        background-position: -159px -142px;
    }
    .ItdM a{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f3.gif');
        background-repeat: no-repeat;
        background-position: -181px -180px;
    }

    .ItdM a:hover
    { 
        background-position: -159px -180px;
    }

    .closeall{
        margin-top:5px;
    }
    .closeall a{
        background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
        background-repeat: no-repeat;
        background-position: -0px -227px;
        display: block;
        height: 21px;
        width: 25px;
    }
    .closeall a:hover{
        background-position: -32px -227px;
    }

  </style>

  <!--[if IE]>
  <style type="text/css">
    #menu {
        bottom: 5px;
    }
  </style>
  <![endif]-->