Back To Website Design Forum

onMouseover cell color change...?

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post March 30th, 2004, 12:23 pm

I had the same problem with trying to get links and cells to fade at the same time by using the two scripts, that I now think is caused by set and clear intervals canceling eachother out. I'm about to combine the two scripts into one and see what happens :D
Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 30th, 2004, 12:23 pm

  • oblongintellect
  • Novice
  • Novice
  • No Avatar
  • Joined: Mar 23, 2004
  • Posts: 28
  • Status: Offline

Post March 30th, 2004, 2:35 pm

You gotta let me know! This would make an excellent "all in one" script for my site!
  • stickfigure
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Mar 28, 2004
  • Posts: 49
  • Status: Offline

Post March 30th, 2004, 5:22 pm

thank you Nunzio390! it was exactly what i was looking for.

however, i can get it to work externally but like the others, the link hover cancels it out. (i am also using your fade script)

if anyone can figure out a solution please post it!
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post March 30th, 2004, 10:48 pm

Edit: Found time to play with it a little more :D
[new] moved all params to the top in hex for easier input
[new] fixed the color glitches
[new] added border options (no fade yet)
[new] XHTML'ed the example (just for the shmell of it)
[new] fade is smoother

[NOTE] you still have to define the original colors in your cells and texts (or css), I set it up the way it is for an easier edit when I figure out how to capture all the documents color values. For now the "orig" variables serve as reference for the fading, make sure they match your css/colors.

working example: IE6, NS7, FFox08 tested
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>cross-fade</title>

<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 = "7788ff"; // color for text to fade to
var fadeToCell = "f0f0f0"; // color for cell to fade to
var origText = "ffffff"; // original text color
var origCell = "7788ff"; // original cell color
var newBorder = "56789a"; // border hover color
var origBorder = "99aaff"; // 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">
/*<![CDATA[*/
.navA{position:absolute; left:20px; top:10px; width:120px;}
td,.navA{border:#99aaff 1px solid; font-size:12px; font-family:Verdana,Tahoma;}
tr{height:20px;}
/*]]>*/
</style>
</head>
<body>
<div class="navA">
<table cellspacing="0" width="100%" style=
"cursor:pointer; background:#7788ff; color:#ffffff;">
<tr>
<td onmouseover="cellover1(this)" onmouseout=
"cellout1(this)" onclick="window.location.href='http://www.ozzu.com'">OZZU</td>
</tr>
<tr>
<td onmouseover="cellover1(this)" onmouseout=
"cellout1(this)" onclick="window.open('http://www.google.com')">Google</td>
</tr>
<tr>
<td onmouseover="cellover1(this)" onmouseout=
"cellout1(this)" onclick="window.location.href='http://www.bigwebmaster.com'">BWM.com</td>
</tr>
<tr>
<td onmouseover="cellover1(this)" onmouseout=
"cellout1(this)" onclick="window.location.href='http://www.unflux.com'">UNFLUX.com</td>
</tr>
<tr>
<td onmouseover="cellover1(this)" onmouseout=
"cellout1(this)" onclick="window.location.href='http://www.reptilerooms.com'">Reptile Rooms</td>
</tr>
</table>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content=
  6. "text/html; charset=us-ascii" />
  7. <title>cross-fade</title>
  9. <script language="javascript" type="text/javascript">
  10. //<![CDATA[
  11. var speed = 40; // milliseconds between each step of transition
  12. var steps = 20; // amount to + or - by each step of transition
  13. var fadeToText = "7788ff"; // color for text to fade to
  14. var fadeToCell = "f0f0f0"; // color for cell to fade to
  15. var origText = "ffffff"; // original text color
  16. var origCell = "7788ff"; // original cell color
  17. var newBorder = "56789a"; // border hover color
  18. var origBorder = "99aaff"; // original border color
  20. dC21 = new Array(hextodec(origText.substring(0, 2)),hextodec(origText.substring(2, 4)),hextodec(origText.substring(4, 6)));
  21. dC22 = new Array(hextodec(fadeToText.substring(0, 2)),hextodec(fadeToText.substring(2, 4)),hextodec(fadeToText.substring(4, 6)));
  24. function makearray(n) {
  25.  this.length = n;
  26.  for(var i = 1; i <= n; i++)
  27.   this[i] = 0;
  28.  return this;
  29. }
  30. function hex(i) {
  31.  if (i < 0)  return "00";
  32.  else if (i > 255) return "ff";
  33.  else   return "" + hexa[Math.floor(i/16)] + hexa[i%16];
  34. }
  35. function hexnumtodec(hexchar) {
  36.  if (parseInt(hexchar) == hexchar) return Number(hexchar)
  37.  hexchar = hexchar.toUpperCase()
  38.  switch (hexchar) {
  39.   case 'A': return 10; break;
  40.   case 'B': return 11; break;
  41.   case 'C': return 12; break;
  42.   case 'D': return 13; break;
  43.   case 'E': return 14; break;
  44.   case 'F': return 15; break;
  45.  }
  46. }
  47. function hextodec(daHex) {
  48.  var daDec = Number((16 * hexnumtodec(daHex.substring(0,1))) + hexnumtodec(daHex.substring(1,2)))
  49.  return daDec
  50. }
  52. function convert2Dec(hex)
  53.  {
  54.   var rgb = new Array();
  55.   for (var u = 0; u < 3; u++)
  56.    rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16);
  57.   return rgb;
  58.  }
  60. mode = true;
  62. function setColor(r,g,b,what) {
  63.  var hr = hex(r); var hg = hex(g); var hb = hex(b);
  64.  var daColor = "#"+hr+hg+hb
  65.  if(mode){
  66.       daEl.style.backgroundColor = daColor;
  67.       mode = false;
  68.  }
  69.  else{
  70.      if(dC21[0] < dC22[0]) dC21[0] += step;
  71.      if(dC21[0] > dC22[0]) dC21[0] -= step;
  72.      if(dC21[1] < dC22[1]) dC21[1] += step;
  73.      if(dC21[1] > dC22[1]) dC21[1] -= step;
  74.      if(dC21[2] < dC22[2]) dC21[2] += step;
  75.      if(dC21[2] > dC22[2]) dC21[2] -= step;
  76.      dC2B = "RGB(" + dC21[0] + "," + dC21[1] + "," + dC21[2] + ")";
  77.      daEl.style.color = dC2B;
  78.      mode = true;
  79.  }   
  80.  if (daColor == colorend.toLowerCase()) {
  81.   dC21[0] = hextodec(origText.substring(0, 2));
  82.   dC21[1] = hextodec(origText.substring(2, 4));
  83.   dC21[2] = hextodec(origText.substring(4, 6));
  84.   dC2B = "RGB(" + dC22[0] + "," + dC22[1] + "," + dC22[2] + ")";
  85.   daEl.style.color = dC2B;
  86.   clearInterval(iId)
  87.   iId = null
  88.   timerRunning = false
  89.   mode = true
  90.  }
  91. }
  93. function fade(what) {
  94.  i++
  95.  setColor(
  96.   Math.floor(sr * ((step-i)/step) + er * (i/step)),
  97.   Math.floor(sg * ((step-i)/step) + eg * (i/step)),
  98.   Math.floor(sb * ((step-i)/step) + eb * (i/step)),
  99.   what);
  100. }
  101. hexa = new makearray(16);
  102. for(var i = 0; i < 10; i++)
  103.  hexa[i] = i;
  104. hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
  105. hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
  107. var i
  108. var iId = null
  109. var sr, sg, sb
  110. var er, eg, eb
  111. var interval = 1
  112. var step = 16
  113. var colorstart
  114. var colorend
  115. var daEl
  116. var timerRunning = false
  118. function myfade(el,cs,ce,iv,st) {
  119.  daEl = el
  120.  colorstart = cs
  121.  colorend = ce
  122.  interval = iv
  123.  step = st
  124.  i = 0
  125.  if (timerRunning) {
  126.   clearInterval(iId)
  127.   iId = null
  128.  }
  129.  var myRe = /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i
  130.  if (colorstart.match(myRe)) {
  131.   sr = hextodec(RegExp.$1)
  132.   sg = hextodec(RegExp.$2)
  133.   sb = hextodec(RegExp.$3)
  134.  }
  135.  if (colorend.match(myRe)) {
  136.   er = hextodec(RegExp.$1)
  137.   eg = hextodec(RegExp.$2)
  138.   eb = hextodec(RegExp.$3)
  139.  }
  140.  timerRunning = false;
  141.  iId = setInterval("fade()",interval)
  142.  timerRunning = true;
  143. }
  144. function orig(tc){
  145.      dC21[0] = hextodec(origText.substring(0, 2));
  146.      dC21[1] = hextodec(origText.substring(2, 4));
  147.      dC21[2] = hextodec(origText.substring(4, 6));
  148.      tc.style.backgroundColor = "#" + origCell;
  149.      tc.style.borderColor = "#" + origBorder;
  150.      tc.style.color = "#" + origText;
  151. }
  152. function cellover1(tc) {
  153.  orig(tc);
  154.  colorNow = "#" + origCell;
  155.  colorTo = "#" + fadeToCell;
  156.  myfade(tc,colorNow,colorTo,speed,steps)
  157.  tc.style.borderColor = "#" + newBorder;
  158. }
  159. function cellout1(tc) {
  160.  clearInterval(iId)
  161.  tc.style.borderColor = "#" + origBorder;
  162.  orig(tc);
  163. }
  164. //]]>
  165. </script>
  166. <style type="text/css">
  167. /*<![CDATA[*/
  168. .navA{position:absolute; left:20px; top:10px; width:120px;}
  169. td,.navA{border:#99aaff 1px solid; font-size:12px; font-family:Verdana,Tahoma;}
  170. tr{height:20px;}
  171. /*]]>*/
  172. </style>
  173. </head>
  174. <body>
  175. <div class="navA">
  176. <table cellspacing="0" width="100%" style=
  177. "cursor:pointer; background:#7788ff; color:#ffffff;">
  178. <tr>
  179. <td onmouseover="cellover1(this)" onmouseout=
  180. "cellout1(this)" onclick="window.location.href='http://www.ozzu.com'">OZZU</td>
  181. </tr>
  182. <tr>
  183. <td onmouseover="cellover1(this)" onmouseout=
  184. "cellout1(this)" onclick="window.open('http://www.google.com')">Google</td>
  185. </tr>
  186. <tr>
  187. <td onmouseover="cellover1(this)" onmouseout=
  188. "cellout1(this)" onclick="window.location.href='http://www.bigwebmaster.com'">BWM.com</td>
  189. </tr>
  190. <tr>
  191. <td onmouseover="cellover1(this)" onmouseout=
  192. "cellout1(this)" onclick="window.location.href='http://www.unflux.com'">UNFLUX.com</td>
  193. </tr>
  194. <tr>
  195. <td onmouseover="cellover1(this)" onmouseout=
  196. "cellout1(this)" onclick="window.location.href='http://www.reptilerooms.com'">Reptile Rooms</td>
  197. </tr>
  198. </table>
  199. </div>
  200. </body>
  201. </html>
Strong with this one, the sudo is.
  • stickfigure
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Mar 28, 2004
  • Posts: 49
  • Status: Offline

Post March 30th, 2004, 11:31 pm

still getting a "'style' is null or not an object " error :shock:
  • oblongintellect
  • Novice
  • Novice
  • No Avatar
  • Joined: Mar 23, 2004
  • Posts: 28
  • Status: Offline

Post March 31st, 2004, 1:53 am

That's impressive. I'll play with it some and see what I can come up with. Thx joebert! :D
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post March 31st, 2004, 7:30 pm

Found time to play with that script a little more :D I just edited my original post.
Strong with this one, the sudo is.
  • oblongintellect
  • Novice
  • Novice
  • No Avatar
  • Joined: Mar 23, 2004
  • Posts: 28
  • Status: Offline

Post April 1st, 2004, 8:28 pm

That is really good! I'm definetly going to use it thanks joebert!

1, 2

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 138 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.