利用JS实现OnMouseOver和OnMouseOut功能

首先定义OnMouseOver和OnMouseOut时使用的样式。

 

<style type="text/css">

.actionBtnIn
{
    background:url('button_in.jpg') repeat-x
}
       
.actionBtnOut
{
    background:url('button_out.jpg') repeat-x

}

</style>

 

将这段脚本拷贝到Master页即可。

 

<script type="text/javascript">
( function(){
    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        }
        else {
            elm['on' + evType] = fn;
        }
    }
    
    function getElementsByClassName(className, tag, elm){
        var testClass = new RegExp("(^|//s)" + className + "(//s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }
    
    function moverhandler(e){
        var evt = e || window.event;
        var el = e.target || e.srcElement;
        
        if( el.className.indexOf( "actionBtnIn" ) == -1 && el.className.indexOf( "actionBtnOut" ) == -1)
            el.className += (" actionBtnIn");
        
        el.className = el.className.replace( /actionBtnOut/ig, "actionBtnIn" );
    }
    
    function mouthandler(e){
        var evt = e || window.event;
        var el = e.target || e.srcElement;
        
        if( el.className.indexOf( "actionBtnIn" ) == -1 && el.className.indexOf( "actionBtnOut" ) == -1)
            el.className += (" actionBtnOut");
            
        el.className = el.className.replace( /actionBtnIn/ig, "actionBtnOut" );
    }
    
    var objListMainButton = getElementsByClassName( "mainButton" );
    var objListmainButton150 = getElementsByClassName( "mainButton150" );
    var objListmainButton50 = getElementsByClassName( "mainButton50" );
    
    for( var i = 0; i < objListMainButton.length; i++ ){
        var curObj = objListMainButton[i];
        ( function(){
            addEvent( curObj, "mouseover", moverhandler );
            addEvent( curObj, "mouseout", mouthandler );
        })();
    }
    
    for( var i = 0; i < objListmainButton150.length; i++ ){
        var curObj = objListmainButton150[i];
        ( function(){
            addEvent( curObj, "mouseover", moverhandler );
            addEvent( curObj, "mouseout", mouthandler );
        })();
    }
    
    for( var i = 0; i < objListmainButton50.length; i++ ){
        var curObj = objListmainButton50[i];
        ( function(){
            addEvent( curObj, "mouseover", moverhandler );
            addEvent( curObj, "mouseout", mouthandler );
        })();
    }
    
})();
</script>