Onmouseover and onmouseout functions using JS

First, define the style used for onmouseover and onmouseout.

 

<Style type = "text/CSS">

. Actionbtnin
{
Background: url('button_in.jpg ') Repeat-x
}

. Actionbtnout
{
Background: url('button_out.jpg ') Repeat-x

}

</Style>

 

Copy the script to the master page.

 

<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.tar GET | 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.tar GET | 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>