PDA

Click to See Complete Forum and Search --> : chainging background color

Webskater
04-05-2004, 08:48 AM
Can anyone give me a clue how to use DHTML to gradually change the background color of a cell from one color to another.
gil davis
04-05-2004, 09:53 AM
<head>
<script>
var origR = 15;
var origG = 0;
var origB = 0;
var endR = 0;
var endG = 15;
var endB = 0;
var deltaR = -1;
var deltaG = 1;
var deltaB = 0;
var currR = 15;
var currG = 0;
var currB = 0;
var hx = new Array(0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F");
var timer = null;

function toHex(nm) {
if (nm < 16)
return (hx[nm]);
}

function change() {
if (currR != endR)
currR += deltaR;
if (currG != endG)
currG += deltaG;
if (currB != endB)
currB += deltaB;
document.getElementById("r1c1").style.backgroundColor = "#" + hx[currR] + hx[currG] + hx[currB];
if (!((currR == endR) && (currG == endG) && (currB == endB)))
{timer = setTimeout("change()", 100);}
}

function init() {
timer = setTimeout("change()", 100);
}
</script>
</head>
<body onload="init()">
<table border width=100% height=100%>
<tbody>
<tr>
<td id="r1c1" style="background-color: rgb(255,0,0)">This is the cell that will change</td>
<td>This cell will not change</td>
<td>This cell will not change</td>
</tr>
<tr>
<td>This cell will not change</td>
<td>This cell will not change</td>
<td>This cell will not change</td>
</tr>
<tr>
<td>This cell will not change</td>
<td>This cell will not change</td>
<td>This cell will not change</td>
</tr>
</tbody>
</table>
</body>
Webskater
04-05-2004, 10:23 AM
Thanks for your (amazingly comprehensive) answer. I was hoping for a pointer not all that code. Thanks again.
Is your solution cross-browser?
Something I would also like to do is use the transition filters in IE to change the background colour of a cell. (Microsoft's web site uses these to create the graduated tints at the top of their site.) I'd like to be able to pass different colours as the StartColor and EndColor of these filters to. Any ideas how to do this in code?
gil davis
04-05-2004, 10:32 AM
Originally posted by Webskater
Is your solution cross-browser?I tested in IE 6 and NS 7. It should work in Mozilla. It should also work in IE 5. It won't work in version 4 (or earlier) browsers.

Something I would also like to do is use the transition filters in IE to change the background colour of a cell. ... I'd like to be able to pass different colours as the StartColor and EndColor of these filters to. Any ideas how to do this in code?You should be able to adjust the colors in the filter by building a valid string and applying the style to the right object. I have only worked with the revealTrans filter so far.