onMouseover cell color change...?

  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

I noticed in this forum that whenever you mouseover the main table the individual cells change color slightly (that's really cool). I was wondering how this can be accomplished in dreamweaverMX?

*Pardon me if this has been asked before but whenever I did a search the results were too vague...

Thanx in advance, -OI
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

I was actually referring to the table color change not the rollover effect on the link text. Y'know how it's dark grey and then gets slightly lighter onMouseover? Thanks though.

-OI
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

oblongintellect...

Although I'm not certain if this board uses the same scripting that I do, I do in fact use a similar effect at this page at my site, when you mouseover different cells in the games table there... http://nunzioweb.com/games.shtml

I will show you a working example with 6 cells in a table. All cells in the table will have the color-change mouseover effect. The first 3 cells in that table will include links, the last 3 will only have the color-change mouseover effect.

Working example: http://nunzioweb.com/cellcolor_mouseover-example.htm

If this is the effect that you are interested in achieving, I will post the code for you. Let me know.
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

That's what I'm looking for, right there. I think I found the code in ozzu's source but I'm having trouble imbedding it into my site. If you could post the code and I will compare the two. Also, If you have any tips on how to accomplish this effect in dreamweaver or frontpage let me know,ok?


(insert text) Another thing I thought was very interesting on your site was the ability you have to let your expanding menu go through your framepage into the left frame. How did you accomplish that?(/insert text)
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

oblongintellect...

OK. I whipped up a page to show you how to code both the Ozzu-style cell color mouseover changes and also my Nunzio-style "fading" cell color mouseover changes. Choose either one you prefer, although I like my "fading" color changes better...

http://nunzioweb.com/misc/cellcolor_2mo ... amples.htm

Quote:
Also, If you have any tips on how to accomplish this effect in dreamweaver or frontpage let me know,ok?
Nope. Sorry. I never use any GUI or WYSIWYG editors and know nothing about them, nor would I care to. I code strictly by hand in Editpad. Also, Frontpage tends to throw in a bunch of Micro$oft-specific coding that doesn't work across browsers, and I always code for cross-browser compatibility. Perhaps someone else can help you there.

Quote:
Another thing I thought was very interesting on your site was the ability you have to let your expanding menu go through your framepage into the left frame. How did you accomplish that?
Again I'm sorry because I really don't understand what you are asking. There are no frames at my site at all. There are however several inline frames. Not sure what you are asking here. Can you elaborate more on it?
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Can't wait till CSS2 is widely accepted. We'll be able to have something like

table#main td:hover {background:color;}

Much better than JavaScript.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Well you can. Make the links the height and width of the cell (100%) and then hover on the link??

Its not like you often want a color change on a cell that isn't a link.

nunizo, why do you have uncredited games on your site? You really should be adding a disclaimer to say that some (if not all) of them are not yours.
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Good morning everyone. Off to work in a few but when I read the post by rtm223 just now, I felt I needed to reply...

Quote:
nunizo, why do you have uncredited games on your site? You really should be adding a disclaimer to say that some (if not all) of them are not yours.

rtm223... disclaimers are unneeded. Full credit is given (when needed) on games. After clicking any game link, if credit is needed there is credit given directly beneath the iframe that links to the game.

Example: after the PACMAN game page loads, directly under PACMAN you should see this...

A Paul Neave Game - neave.com

Any other game where this is required contains the same . OK? :)

_________________________________________________

oblongintellect....

Did you utilize any of the scripting I posted for you? Is everything OK now?

OK. Off to work. Have a good day, everybody! :D
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

rtm223 wrote:
Well you can. Make the links the height and width of the cell (100%) and then hover on the link??

That much is obvious. But it'd save CSS just to have the background of the td change rather than have to set the link's height, width, display type, etc.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nunzio390 wrote:
rtm223... disclaimers are unneeded. Full credit is given (when needed) on games. After clicking any game link, if credit is needed there is credit given directly beneath the iframe that links to the game.

Example: after the PACMAN game page loads, directly under PACMAN you should see this...

A Paul Neave Game - neave.com


I stand correct and I appologise :oops:
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

_________________________________________________

I'm in the process of incorporating the code right now. It won't be apparent on my site for a few days probably (testing) but I really appreciate all your help. PS I like your color transition better than ozzu's :) No offence...
I also think it's amazing that you code it all by hand in a text editor, I wish I could afford to be a purist. Unfortunately I'm just not at that level. Thanx again.

-OI
  • stickfigure
  • Beginner
  • Beginner
  • stickfigure
  • Posts: 49

Post 3+ Months Ago

is there any way one can do this with alternate color cells?

example:
cell 1: black
cell 2: gray
cell 3: black
cell 4: gray

i want them all to fade (on mouse hover) to white, and once mouse out occurs, go back to their original color.

ive messed with the code a bit, but so far im only successful with this code if all the cells are the same color (or return to a single color...) :(
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

stickfigure wrote:
is there any way one can do this with alternate color cells?

example:
cell 1: black
cell 2: gray
cell 3: black
cell 4: gray

i want them all to fade (on mouse hover) to white, and once mouse out occurs, go back to their original color.

stickfigure...

All you have to do is define seperate functions for each of the 2 different-colored table cells, instead of just defining one function, as was done in the first example.

Here's a working example with what you want...
http://nunzioweb.com/misc/cellcolor_2color-test.htm

Here is the javascript for the above example...
Code: [ Select ]
<script language="javascript" type="text/javascript">
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 setColor(r,g,b) {
    var hr = hex(r); var hg = hex(g); var hb = hex(b);
    var daColor = "#"+hr+hg+hb
    daEl.style.backgroundColor = daColor
    if (daColor == colorend.toLowerCase()) {
        clearInterval(iId)
        iId = null
        timerRunning = false
    }
}

function fade() {
    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)));
}
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 cellover1(table_cell1) {
    // play around with these values
    // element, from_color, to_color, interval(milliseconds), transition steps
    myfade(table_cell1,'#000000','#ffffff',20,32)
}
function cellout1(table_cell1) {
    if (timerRunning) {
        clearInterval(iId)
        iId = null
    }
    table_cell1.style.backgroundColor = '#000000'
}

function cellover2(table_cell2) {
    // play around with these values
    // element, from_color, to_color, interval(milliseconds), transition steps
    myfade(table_cell2,'#6A6A6A','#ffffff',20,32)
}
function cellout2(table_cell2) {
    if (timerRunning) {
        clearInterval(iId)
        iId = null
    }
    table_cell2.style.backgroundColor = '#6A6A6A'
}

</script>
  1. <script language="javascript" type="text/javascript">
  2. function makearray(n) {
  3.     this.length = n;
  4.     for(var i = 1; i <= n; i++)
  5.         this[i] = 0;
  6.     return this;
  7. }
  8. function hex(i) {
  9.     if (i < 0)     return "00";
  10.     else if (i > 255) return "ff";
  11.     else         return "" + hexa[Math.floor(i/16)] + hexa[i%16];
  12. }
  13. function hexnumtodec(hexchar) {
  14.     if (parseInt(hexchar) == hexchar) return Number(hexchar)
  15.     hexchar = hexchar.toUpperCase()
  16.     switch (hexchar) {
  17.         case 'A': return 10; break;
  18.         case 'B': return 11; break;
  19.         case 'C': return 12; break;
  20.         case 'D': return 13; break;
  21.         case 'E': return 14; break;
  22.         case 'F': return 15; break;
  23.     }
  24. }
  25. function hextodec(daHex) {
  26.     var daDec = Number((16 * hexnumtodec(daHex.substring(0,1))) + hexnumtodec(daHex.substring(1,2)))
  27.     return daDec
  28. }
  29. function setColor(r,g,b) {
  30.     var hr = hex(r); var hg = hex(g); var hb = hex(b);
  31.     var daColor = "#"+hr+hg+hb
  32.     daEl.style.backgroundColor = daColor
  33.     if (daColor == colorend.toLowerCase()) {
  34.         clearInterval(iId)
  35.         iId = null
  36.         timerRunning = false
  37.     }
  38. }
  39. function fade() {
  40.     i++
  41.     setColor(
  42.         Math.floor(sr * ((step-i)/step) + er * (i/step)),
  43.         Math.floor(sg * ((step-i)/step) + eg * (i/step)),
  44.         Math.floor(sb * ((step-i)/step) + eb * (i/step)));
  45. }
  46. hexa = new makearray(16);
  47. for(var i = 0; i < 10; i++)
  48.     hexa[i] = i;
  49. hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
  50. hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
  51. var i
  52. var iId = null
  53. var sr, sg, sb
  54. var er, eg, eb
  55. var interval = 1
  56. var step = 16
  57. var colorstart
  58. var colorend
  59. var daEl
  60. var timerRunning = false
  61. function myfade(el,cs,ce,iv,st) {
  62.     daEl = el
  63.     colorstart = cs
  64.     colorend = ce
  65.     interval = iv
  66.     step = st
  67.     i = 0
  68.     if (timerRunning) {
  69.         clearInterval(iId)
  70.         iId = null
  71.     }
  72.     var myRe = /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i
  73.     if (colorstart.match(myRe)) {
  74.         sr = hextodec(RegExp.$1)
  75.         sg = hextodec(RegExp.$2)
  76.         sb = hextodec(RegExp.$3)
  77.     }
  78.     if (colorend.match(myRe)) {
  79.         er = hextodec(RegExp.$1)
  80.         eg = hextodec(RegExp.$2)
  81.         eb = hextodec(RegExp.$3)
  82.     }
  83.     timerRunning = false;
  84.     iId = setInterval("fade()",interval)
  85.     timerRunning = true;
  86. }
  87. function cellover1(table_cell1) {
  88.     // play around with these values
  89.     // element, from_color, to_color, interval(milliseconds), transition steps
  90.     myfade(table_cell1,'#000000','#ffffff',20,32)
  91. }
  92. function cellout1(table_cell1) {
  93.     if (timerRunning) {
  94.         clearInterval(iId)
  95.         iId = null
  96.     }
  97.     table_cell1.style.backgroundColor = '#000000'
  98. }
  99. function cellover2(table_cell2) {
  100.     // play around with these values
  101.     // element, from_color, to_color, interval(milliseconds), transition steps
  102.     myfade(table_cell2,'#6A6A6A','#ffffff',20,32)
  103. }
  104. function cellout2(table_cell2) {
  105.     if (timerRunning) {
  106.         clearInterval(iId)
  107.         iId = null
  108.     }
  109.     table_cell2.style.backgroundColor = '#6A6A6A'
  110. }
  111. </script>


Here is the table code used in the above example...

Code: [ Select ]
<table style="cursor:pointer; color:#ffffff; background-color:#000000"><tr>
<td style="background-color:#000000" onMouseOver="cellover1(this)" onMouseOut="cellout1(this)">Black Cell</td>
</tr><tr>
<td style="background-color:#6A6A6A" onMouseOver="cellover2(this)" onMouseOut="cellout2(this)">Gray Cell</td>
</tr><tr>
<td style="background-color:#000000" onMouseOver="cellover1(this)" onMouseOut="cellout1(this)">Black Cell</td>
</tr><tr>
<td style="background-color:#6A6A6A" onMouseOver="cellover2(this)" onMouseOut="cellout2(this)">Gray Cell</td>
</tr></table>
  1. <table style="cursor:pointer; color:#ffffff; background-color:#000000"><tr>
  2. <td style="background-color:#000000" onMouseOver="cellover1(this)" onMouseOut="cellout1(this)">Black Cell</td>
  3. </tr><tr>
  4. <td style="background-color:#6A6A6A" onMouseOver="cellover2(this)" onMouseOut="cellout2(this)">Gray Cell</td>
  5. </tr><tr>
  6. <td style="background-color:#000000" onMouseOver="cellover1(this)" onMouseOut="cellout1(this)">Black Cell</td>
  7. </tr><tr>
  8. <td style="background-color:#6A6A6A" onMouseOver="cellover2(this)" onMouseOut="cellout2(this)">Gray Cell</td>
  9. </tr></table>
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

I've got yet another problem. I want make the cellfade script work with the link fader script but every time I try it they just seem to cancel each other out. Here you can view my non-working example http://www.ghosthacker.org/test.htm
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

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
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

You gotta let me know! This would make an excellent "all in one" script for my site!
  • stickfigure
  • Beginner
  • Beginner
  • stickfigure
  • Posts: 49

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

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

Post 3+ Months Ago

still getting a "'style' is null or not an object " error :shock:
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

That's impressive. I'll play with it some and see what I can come up with. Thx joebert! :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Found time to play with that script a little more :D I just edited my original post.
  • oblongintellect
  • Novice
  • Novice
  • oblongintellect
  • Posts: 28

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 21 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.