Link Rollovers 2

The following script is used to toggle between classes using onmouseover, onmouseout, and onclick

<script type="text/javascript">
<!--
lastObj = ""
function mOver(obj){
if(lastObj != obj.id){
document.getElementById(obj.id).className  = "m_over"
}
}

function mOut(obj){
if(lastObj != obj.id){
document.getElementById(obj.id).className  ="default"
}
}

function mClick(obj){
document.getElementById(obj.id).className  = "m_over"
if (lastObj != obj.id && lastObj != ""){
document.getElementById(lastObj).className  = "default"
}
lastObj = obj.id
}

// -->
</script>

function oClear(){

if(lastObj!=""){
document.getElementById(lastObj).className="default"
lastObj=""
}

}

There is more that one effect that can be created depending on the attributes that you use.
These can include a change of colour, font family, font size, wether italic or bold, background etc, in fact quite a few CSS attributes can be used.
The script could be made to accept arguments passed from the links to make it even more versatile.

The text for following 3 links will go bold onmouseover and revert back to normal onmouseout.
If a link is clicked then it will go bold until another link is clicked.

To have a link highlighted when the page initially loads include onload="mClick('id')" in the opening body tag, where id is the id of the link you want highlighted

<style>

.default{font-weight:normal}
.m_over{font-weight:bold}

</style>

<style>

.default{color:#005500}
.m_over{color:#00AA00}

</style>


<style>

.default{background-color:#445544}
.m_over{background-color:#AADDAA}

</style>


<style>
.default4{
width:90px;
height:20px;
font-size:12px;
color:#FFFFFF;
border:0px outset #808080;
padding-top:1px;
padding-left:6px;
display:block;
}

.m_over4{
width:90px;
height:20px;
font-size:12px;
color:#FFFFFF;
background-color:#6fa088;
border-top:1px outset #FFFFFF;
border-right:1px inset #000000;
border-bottom:1px inset #000000;
border-left:1px outset #FFFFFF;
padding-left:5px;
display:block;
cursor:hand;
cursor:pointer;
}

.m_down4{
width:90px;
height:20px;
font-size:12px;
color:#FFFFFF;
background-color:#5e8066;
border-top:1px inset #000000;
border-right:1px outset #FFFFFF;
border-bottom:1px outset #FFFFFF;
border-left:1px inset #000000;
padding-left:5px;
display:block;
cursor:hand;
cursor:pointer;
}

/* the following 3 lines for Moz to stabilise the font color */
a.m_over4:hover{color:#FFFFFF}
a.m_down4:hover{color:#FFFFFF}
a.m_down4:active{color:#FFFFFF}

</style>