Full version: jsB@nk » Menu » Fading background menu
URL: https://www.javascriptbank.com/fading-background-menu.html
A dynamic HTML effect that fades background-color of links as you move over them.
Full version: jsB@nk » Menu » Fading background menu
URL: https://www.javascriptbank.com/fading-background-menu.html
<script>hex = new Array(8)set = new Array(4)set1 = new Array(0,0,0,0,0)hex[0] = "CCCCCC"hex[1] = "BBBBBB"hex[2] = "AAAAAA"hex[3] = "999999"hex[4] = "888888"hex[5] = "777777" hex[6] = "666666"hex[7] = "555555"hex[8] = "444444"function rollon(n){if (n==1){set[1]=1}if (n==2){set[2]=1}if (n==3){set[3]=1}if (n==4){set[4]=1}}function rolloff(n){if (n==1){set[1]=0}if (n==2){set[2]=0}if (n==3){set[3]=0}if (n==4){set[4]=0}}function color(){if (set[1]==1){if (set1[1]==8){} else{set1[1]++ ;item1.style.background = hex[set1[1]] }} else {if (set1[1]==0){} else{set1[1]=set1[1]-1 ;item1.style.background = hex[set1[1]] }}if (set[2]==1){if (set1[2]==8){} else{set1[2]++ ;item2.style.background = hex[set1[2]] }} else {if (set1[2]==0){} else{set1[2]=set1[2]-1 ;item2.style.background = hex[set1[2]] }}if (set[3]==1){if (set1[3]==8){} else{set1[3]++ ;item3.style.background = hex[set1[3]] }} else {if (set1[3]==0){} else{set1[3]=set1[3]-1 ;item3.style.background = hex[set1[3]] }}if (set[4]==1){if (set1[4]==8){} else{set1[4]++ ;item4.style.background = hex[set1[4]] }} else {if (set1[4]==0){} else{set1[4]=set1[4]-1 ;item4.style.background = hex[set1[4]] }}setTimeout("color()",100)}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="color()"><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc" bordercolor="#000000"> <tbody><tr> <td width="100" id="item1" onmouseover="rollon(1)" onmouseout="rolloff(1)"><p align="center"><font color="#cc0000">Menu</font></p><font color="#cc0000"> </font></td> </tr> <tr> <td id="item2" onmouseover="rollon(2)" onmouseout="rolloff(2)"><p align="center"><font color="#cc0000">Intro</font></p><font color="#cc0000"> </font></td> </tr> <tr> <td id="item3" onmouseover="rollon(3)" onmouseout="rolloff(3)"><p align="center"><font color="#cc0000">Topic1</font></p><font color="#cc0000"> </font></td> </tr> <tr> <td id="item4" onmouseover="rollon(4)" onmouseout="rolloff(4)"><p align="center"><font color="#cc0000">Topic 2</font></p><font color="#cc0000"> </font></td> </tr></tbody></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->