Link Rollovers Multiple

See also Link Rollovers 2

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>
<a id="lnk1b" class="lks1" href="#null" onmouseover="mOver(this,0)" onmouseout="mOut(this,0)" onclick="mClick(this,0)">Link Set 1</a>
<a id="lnk1c" class="lks1" href="#null" onmouseover="mOver(this,0)" onmouseout="mOut(this,0)" onclick="mClick(this,0)">Link Set 1</a>
<a id="lnk1d" class="lks1" href="#null" onmouseover="mOver(this,0)" onmouseout="mOut(this,0)" onclick="mClick(this,0)">Link Set 1</a>

<a id="lnk2a" class="lks2" href="#null" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mClick(this,1)">Link Set 2</a>
<a id="lnk2b" class="lks2" href="#null" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mClick(this,1)">Link Set 2</a>
<a id="lnk2c" class="lks2" href="#null" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mClick(this,1)">Link Set 2</a>
<a id="lnk2d" class="lks2" href="#null" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mClick(this,1)">Link Set 2</a>

<a id="lnk3a" class="lks3" href="#null" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" onclick="mClick(this,2)">Link Set 3</a>
<a id="lnk3b" class="lks3" href="#null" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" onclick="mClick(this,2)">Link Set 3</a>
<a id="lnk3c" class="lks3" href="#null" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" onclick="mClick(this,2)">Link Set 3</a>
<a id="lnk3d" class="lks3" href="#null" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" onclick="mClick(this,2)">Link Set 3</a>

<a id="lnk4a" class="lks4" href="#null" onmouseover="mOver(this,3)" onmouseout="mOut(this,3)" onclick="mClick(this,3)">Link Set 4</a>
<a id="lnk4b" class="lks4" href="#null" onmouseover="mOver(this,3)" onmouseout="mOut(this,3)" onclick="mClick(this,3)">Link Set 4</a>
<a id="lnk4c" class="lks4" href="#null" onmouseover="mOver(this,3)" onmouseout="mOut(this,3)" onclick="mClick(this,3)">Link Set 4</a>
<a id="lnk4d" class="lks4" href="#null" onmouseover="mOver(this,3)" onmouseout="mOut(this,3)" onclick="mClick(this,3)">Link Set 4</a>