This example shows how you can have more than 1 set of links in the same page with each set having their own colours.
| Link Set 1 Link Set 1 Link Set 1 Link Set 1 | Link Set 2 Link Set 2 Link Set 2 Link Set 2 | Link Set 3 Link Set 3 Link Set 3 Link Set 3 | Link Set 4 Link Set 4 Link Set 4 Link Set 4 |
<script type="text/javascript">
<!--
lnk_col=new Array() // default hover visited
lnk_col[0]=new Array("#445544","#AADDAA","#77AA77") // set 1
lnk_col[1]=new Array("#555544","#DDDDAA","#AAAA77") // set 2
lnk_col[2]=new Array("#554444","#DDAAAA","#AA7777") // set 3
lnk_col[3]=new Array("#444455","#AAAADD","#7777AA") // set 4
lastID = ""
function mOver(obj,num){
if(lastID != obj.id){
document.getElementById(obj.id).style.backgroundColor = lnk_col[num][1] //onmouseover colour
}
}
function mOut(obj,num){
if(lastID != obj.id){
document.getElementById(obj.id).style.backgroundColor = lnk_col[num][0] // onmouseout colour
}
}
function mClick(obj,num){
document.getElementById(obj.id).style.backgroundColor = lnk_col[num][2] // onclick
if (lastID != obj.id && lastID != ""){
document.getElementById(lastID).style.backgroundColor = lnk_col[lastNum][0] // colour back to default
}
lastID = obj.id
lastNum=num
}
// -->
</script>
<style>
.lks1{ /* set 1 */
width:150px;
color:#FFFFFF;
background-color:#445544;
border:1px;
border-bottom:1px solid #99BB99;
padding:3px 0px 2px 7px;
display:block;
font-size:12px;
text-decoration:none;
}
a.lks1:hover{color:#FFFFFF}
a.lks1:active{color:#FFFFFF}
.lks2{ /* set 2 */
width:150px;
color:#FFFFFF;
background-color:#555544;
border:1px;
border-bottom:1px solid #BBBB99;
padding:3px 0px 2px 7px;
display: block;
font-size: 12px;
text-decoration:none;
}
a.lks2:hover{color:#FFFFFF}
a.lks2:active{color:#FFFFFF}
.lks3{ /* set 3 */
width:150px;
color:#FFFFFF;
background-color:#554444;
border:1px;
border-bottom:#BB9999 1px solid;
padding:3px 0px 2px 7px;
display: block;
font-size: 12px;
text-decoration:none;
}
a.lks3:hover{color:#FFFFFF}
a.lks3:active{color:#FFFFFF}
.lks4{ /* set 4 */
width:150px;
color:#FFFFFF;
background-color:#444455;
border:1px;
border-bottom:#9999BB 1px solid;
padding:3px 0px 2px 7px;
display: block;
font-size: 12px;
text-decoration:none;
}
a.lks4:hover{color:#FFFFFF}
a.lks4:active{color:#FFFFFF}
</style>
<a id="lnk1a" class="lks1" href="#null" onmouseover="mOver(this,0)" onmouseout="mOut(this,0)" onclick="mClick(this,0)">Link Set 1</a>