css提示

鼠标经过链接后的提示样色

先看看效果：

 

<script language="javascript" src="../common/js_css/addEvent.js" type="text/javascript"></script>
<script language="javascript" src="../common/js_css/sweetTitles.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../common/js_css/sweetTitles.css"/>

<a href="index.jsp?fNum=1&sNum=_01&type=info&bh=21" title="主题:kent<br>内容:测试发送！<br>发表人:">kent</a>

 

addEvent.js

/*------------------------------------------
Add Event (c) Creative Commons 2007
Author: ison
------------------------------------------*/
Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i < this.length; i++) {
        if (this[i] === value) {
            return true;
        }
    }
    return false;
};

function addEvent( obj, type, fn ) {
    if (obj.addEventListener) {
        obj.addEventListener( type, fn, false );
        EventCache.add(obj, type, fn);
    }
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on"+type] = obj["e"+type+fn];
    }
}
    
var EventCache = function(){
    var listEvents = [];
    return {
        listEvents : listEvents,
        add : function(node, sEventName, fHandler){
            listEvents.push(arguments);
        },
        flush : function(){
            var i, item;
            for(i = listEvents.length - 1; i >= 0; i = i - 1){
                item = listEvents[i];
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if(item[1].substring(0, 2) != "on"){
                    item[1] = "on" + item[1];
                };
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();
addEvent(window,'unload',EventCache.flush);

 

sweetTitles.js

/*
Sweet Titles (c) Creative Commons 2007
Author: ison
*/
var sweetTitles = { 
    xCord : 0,                                // @Number: x pixel value of current cursor position
    yCord : 0,                                // @Number: y pixel value of current cursor position
    tipElements : ['a','abbr','acronym'],    // @Array: Allowable elements that can have the toolTip
    obj : Object,                            // @Element: That of which you're hovering over
    tip : Object,                            // @Element: The actual toolTip itself
    active : 0,                                // @Number: 0: Not Active || 1: Active
    init : function() {
        if ( !document.getElementById ||
            !document.createElement ||
            !document.getElementsByTagName ) {
            return;
        }
        var i,j;
        this.tip = document.createElement('div');
        this.tip.id = 'toolTip';
        document.getElementsByTagName('body')[0].appendChild(this.tip);
        this.tip.style.top = '0';
        this.tip.style.visibility = 'hidden';
        var tipLen = this.tipElements.length;
        for ( i=0; i<tipLen; i++ ) {
            var current = document.getElementsByTagName(this.tipElements[i]);
            var curLen = current.length;
            for ( j=0; j<curLen; j++ ) {
                addEvent(current[j],'mouseover',this.tipOver);
                addEvent(current[j],'mouseout',this.tipOut);
                current[j].setAttribute('tip',current[j].title);
                current[j].removeAttribute('title');
            }
        }
    },
    updateXY : function(e) {
        if ( document.captureEvents ) {
            sweetTitles.xCord = e.pageX;
            sweetTitles.yCord = e.pageY;
        } else if ( window.event.clientX ) {
            sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
            sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
        }
    },
    tipOut: function() {
        if ( window.tID ) {
            clearTimeout(tID);
        }
        if ( window.opacityID ) {
            clearTimeout(opacityID);
        }
        sweetTitles.tip.style.visibility = 'hidden';
    },
    checkNode : function() {
        var trueObj = this.obj;
        if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
            return trueObj;
        } else {
            return trueObj.parentNode;
        }
    },
    tipOver : function(e) {
        sweetTitles.obj = this;
        tID = window.setTimeout("sweetTitles.tipShow()",1);
        sweetTitles.updateXY(e);
    },
    tipShow : function() {        
        var scrX = Number(this.xCord);
        var scrY = Number(this.yCord);
        var tp = parseInt(scrY+15);
        var lt = parseInt(scrX+10);
        var anch = this.checkNode();
        var addy = '';
        var access = '';
        if ( anch.nodeName.toLowerCase() == 'a') {
        if(anch.href.toString().indexOf("javascript:")==-1){
            addy ="链接至:<span>"+ (anch.href.length > 45 ? anch.href.toString().substring(0,45)+"...</span>" : anch.href);
        }
            var access = ( anch.accessKey ? ' 快捷键:<span>['+anch.accessKey+']</span><br/> ' : '' );
        } else {
            addy = anch.firstChild.nodeValue;
        }
        this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
        if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
            this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
        } else {
            this.tip.style.left = lt+'px';
        }
        if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
            this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
        } else {
            this.tip.style.top = tp+'px';
        }
        this.tip.style.visibility = 'visible';
        this.tip.style.opacity = '.8';
        this.tip.style.filter = "alpha(opacity:80)";
//        this.tipFade(40);
    },
    tipFade: function(opac) {
        var passed = parseInt(opac);
        var newOpac = parseInt(passed+40);
        if ( newOpac < 80 ) {
            this.tip.style.opacity = '.'+newOpac;
            this.tip.style.filter = "alpha(opacity:"+newOpac+")";
            opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",1);
        }
        else { 
            this.tip.style.opacity = '.80';
            this.tip.style.filter = "alpha(opacity:80)";
        }
    }
};
function pageLoader() {
    sweetTitles.init();
}
addEvent(window,'load',pageLoader);

 

sweetTitles.css

#wbc_online {
    MARGIN-BOTTOM: 0px
}
#wbc_online UL {
    CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 2px 0px; WIDTH: 100%; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#wbc_online UL LI {
    FONT-SIZE: 12px; FLOAT: left; MARGIN: 3px; WIDTH: 19%
}
BODY DIV#toolTip {
    BORDER-RIGHT: #999 3px double; PADDING-RIGHT: 5px; BORDER-TOP: #999 3px double; PADDING-LEFT: 5px; Z-INDEX: 1000; MIN-HEIGHT: 2em; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #999 3px double; WIDTH: auto; PADDING-TOP: 5px; BORDER-BOTTOM: #999 3px double; POSITION: absolute; TEXT-ALIGN: left
}
BODY DIV#toolTip P {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px verdana,arial,sans-serif; COLOR: #000; PADDING-TOP: 0px
}
BODY DIV#toolTip P EM {
    MARGIN-TOP: 3px; DISPLAY: block; COLOR: #000; FONT-STYLE: normal
}
BODY DIV#toolTip P EM SPAN {
    FONT: 9px verdana,arial,sans-serif; COLOR: #000
}