Uncle Jim's JavaScript Examples
Fading Table Cells on MouseOver
This examples shows you how to create fading background colors within table cells on mouseover.
For purposes of this demonstration, the links do not go anywhere.
1 -
Link One
9 -
Link Nine
2 -
Link Two
10 -
Link Ten
3 -
Link Three
11 -
Link Eleven
4 -
Link Four
12 -
Link Twelve
5 -
Link Five
13 -
Link Thirteen
6 -
Link Six
14 -
Link Fourteen
7 -
Link Seven
15 -
Link Fifteen
8 -
Link Eight
16 -
Link Sixteen
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<script language="Javascript" type="text/javascript"> <!-- // This script came from // Uncle Jim's Javascript Examples // JDStiles.com function selectAll(theField) { var tempval=eval("document."+theField) tempval.focus() tempval.select() } //--> </script> <script langauge="JavaScript"> <!-- defaultStatus = "Uncle Jims Website Designs http://jdstiles.com" //--></script> <script language="javascript" type="text/javascript"> //<![CDATA[ var speed = 40; // milliseconds between each step of transition var steps = 20; // amount to + or - by each step of transition var fadeToText = "C00000"; // color for text to fade to var fadeToCell = "eeeee0"; // color for cell to fade to var origText = "000000"; // original text color var origCell = "B9D4E6"; // original cell color var newBorder = "56789a"; // border hover color var origBorder = "35679a"; // original border color dC21 = new Array(hextodec(origText.substring(0, 2)),hextodec(origText.substring(2, 4)),hextodec(origText.substring(4, 6))); dC22 = new Array(hextodec(fadeToText.substring(0, 2)),hextodec(fadeToText.substring(2, 4)),hextodec(fadeToText.substring(4, 6))); function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } function hexnumtodec(hexchar) { if (parseInt(hexchar) == hexchar) return Number(hexchar) hexchar = hexchar.toUpperCase() switch (hexchar) { case 'A': return 10; break; case 'B': return 11; break; case 'C': return 12; break; case 'D': return 13; break; case 'E': return 14; break; case 'F': return 15; break; } } function hextodec(daHex) { var daDec = Number((16 * hexnumtodec(daHex.substring(0,1))) + hexnumtodec(daHex.substring(1,2))) return daDec } function convert2Dec(hex) { var rgb = new Array(); for (var u = 0; u < 3; u++) rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16); return rgb; } mode = true; function setColor(r,g,b,what) { var hr = hex(r); var hg = hex(g); var hb = hex(b); var daColor = "#"+hr+hg+hb if(mode){ daEl.style.backgroundColor = daColor; mode = false; } else{ if(dC21[0] < dC22[0]) dC21[0] += step; if(dC21[0] > dC22[0]) dC21[0] -= step; if(dC21[1] < dC22[1]) dC21[1] += step; if(dC21[1] > dC22[1]) dC21[1] -= step; if(dC21[2] < dC22[2]) dC21[2] += step; if(dC21[2] > dC22[2]) dC21[2] -= step; dC2B = "RGB(" + dC21[0] + "," + dC21[1] + "," + dC21[2] + ")"; daEl.style.color = dC2B; mode = true; } if (daColor == colorend.toLowerCase()) { dC21[0] = hextodec(origText.substring(0, 2)); dC21[1] = hextodec(origText.substring(2, 4)); dC21[2] = hextodec(origText.substring(4, 6)); dC2B = "RGB(" + dC22[0] + "," + dC22[1] + "," + dC22[2] + ")"; daEl.style.color = dC2B; clearInterval(iId) iId = null timerRunning = false mode = true } } function fade(what) { i++ setColor( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step)), what); } hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; var i var iId = null var sr, sg, sb var er, eg, eb var interval = 1 var step = 16 var colorstart var colorend var daEl var timerRunning = false function myfade(el,cs,ce,iv,st) { daEl = el colorstart = cs colorend = ce interval = iv step = st i = 0 if (timerRunning) { clearInterval(iId) iId = null } var myRe = /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i if (colorstart.match(myRe)) { sr = hextodec(RegExp.$1) sg = hextodec(RegExp.$2) sb = hextodec(RegExp.$3) } if (colorend.match(myRe)) { er = hextodec(RegExp.$1) eg = hextodec(RegExp.$2) eb = hextodec(RegExp.$3) } timerRunning = false; iId = setInterval("fade()",interval) timerRunning = true; } function orig(tc){ dC21[0] = hextodec(origText.substring(0, 2)); dC21[1] = hextodec(origText.substring(2, 4)); dC21[2] = hextodec(origText.substring(4, 6)); tc.style.backgroundColor = "#" + origCell; tc.style.borderColor = "#" + origBorder; tc.style.color = "#" + origText; } function cellover1(tc) { orig(tc); colorNow = "#" + origCell; colorTo = "#" + fadeToCell; myfade(tc,colorNow,colorTo,speed,steps) tc.style.borderColor = "#" + newBorder; } function cellout1(tc) { clearInterval(iId) tc.style.borderColor = "#" + origBorder; orig(tc); } //]]> </script> <style type="text/css"> .navA{position:absolute; left:20px; top:10px; width:120px;} td,.navA{border:#35679a 1px solid; font-size:12px; font-family:Verdana,Tahoma;} tr{height:20px;} table { border-collapse: collapse; border: 0; width: 100%; } td { padding: 4px; background-color: #35679a; color: #000000; } img { border: 0; } </style>
COPY
-
Insert Inside Body: <BODY></BODY>
<div align='center'><table><tr><td style="cursor:pointer"><table class="main2"><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'" style="width: 50%"> 1 - <b>Link One</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'" style="width: 50%"> 9 - <b>Link Nine</b></td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 2 - <b>Link Two</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">10 - <b>Link Ten</b></td></tr><tr> <td valign="top" nowrap onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 3 - <b>Link Three</b></td> <td valign="top" nowrap onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">11 - <b>Link Eleven</td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 4 - <b>Link Four</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">12 - <b>Link Twelve</b></td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 5 - <b>Link Five</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">13 - <b>Link Thirteen</b></td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 6 - <b>Link Six</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">14 - <b>Link Fourteen</b></td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 7 - <b>Link Seven</b></td> <td valign="top" nowrap onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">15 - <b>Link Fifteen</b></td></tr><tr> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'"> 8 - <b>Link Eight</b></td> <td valign="top" onmouseover="cellover1(this)" onmouseout="cellout1(this)" onclick="top.location.href='#'">16 - <b>Link Sixteen</b> <br></td></tr></table></td></tr></table></div>
Close This Window