Full version: jsB@nk » Background » Color Gradient Test
URL: https://www.javascriptbank.com/color-gradient-test.html
This JavaScript will paint color for cells. This is useful if you just want an array of color values ranging from astarting color to an ending color in so many steps.
Full version: jsB@nk » Background » Color Gradient Test
URL: https://www.javascriptbank.com/color-gradient-test.html
<STYLE>.content TD {COLOR: white}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*//**********************gradient.jsworks with HTML tablesBy The Octarine Mage**********************/// returns an array of RGB color valuesfunction gradientArray(startColor,endColor,steps){function decimalValue(rgb,index){return 16*hex.indexOf(rgb.charAt(index))+hex.indexOf(rgb.charAt(index+1))}var hex="0123456789abcdef"var value=[]var change=[]for(var i=j=0;i<3;i++){j=i*2+1value[i]=decimalValue(startColor,j)change[i]=(decimalValue(endColor,j)-value[i])/(steps-1)}var colors=[]for(i=0;i<steps-1;i++){colors[i]="#"for(j=0;j<3;j++){colors[i]+=hex.charAt(value[j]/16)+hex.charAt(value[j]%16)value[j]+=change[j]}}colors[steps-1]=endColorreturn colors}// applies a gradient color scheme to a tablefunction Gradient(table,startColor,endColor,direction){var mostColumns=0with (table){for(var i=0;i<rows.length;i++)with(rows[i].cells)if(length>mostColumns)mostColumns=lengthswitch(direction){case 0: // checkerboardvar colors=startColorfor(var r=0;r<rows.length;r++){if(r)if(startColor==rows[r-1].cells[0].bgColor)colors=endColorelsecolors=startColorfor(var c=0;c<rows[r].cells.length;c++){rows[r].cells[c].bgColor=colorsif(colors==startColor)colors=endColorelsecolors=startColor}}breakcase 1: // bottom left to top rightvar colors=gradientArray(startColor,endColor,rows.length+mostColumns-1)for(var j=0,r=rows.length-1;r>=0;r--,j++)with(rows[r])for(var i=j,c=0;c<cells.length;c++,i++)cells[c].bgColor=colors[i]breakcase 2: // bottom to topvar colors=gradientArray(startColor,endColor,rows.length)for(var i=0,r=rows.length-1;r>=0;r--,i++)with(rows[r])for(var c=0;c<cells.length;c++)cells[c].bgColor=colors[i]breakcase 3: // bottom right to top leftvar colors=gradientArray(startColor,endColor,rows.length+mostColumns-1)for(var j=0,r=rows.length-1;r>=0;r--,j++)with(rows[r])for(var i=j,c=cells.length-1;c>=0;c--,i++)cells[c].bgColor=colors[i]breakcase 4: // left to rightvar colors=gradientArray(startColor,endColor,mostColumns)for(var r=0;r<rows.length;r++)with(rows[r])for(var i=c=0;c<cells.length;c++,i++)cells[c].bgColor=colors[i]breakcase 5: // whorlif (rows.length>mostColumns)var colors=gradientArray(startColor,endColor,Math.round(rows.length/2+.4))elsevar colors=gradientArray(startColor,endColor,Math.round(mostColumns/2+.4))for(var r1=0,r2=rows.length-1;r1<=r2;r1++,r2--)for(var i=c1=0,c2=rows[r1].cells.length-1;c1<=c2; c1++,c2--){rows[r1].cells[c1].bgColor=rows[r1].cells[c2].bgColor=rows[r2].cells[c1].bgColor=rows[r2].cells[c2].bgColor=colors[i]if ( i<r1) i++}breakcase 6: // right to leftGradient(table,endColor,startColor,4)breakcase 7: // top left to bottom rightGradient(table,endColor,startColor,3)breakcase 8: // top to bottomGradient(table,endColor,startColor,2)breakcase 9: // top right to bottom leftGradient(table,endColor,startColor,1)break}}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE id=tbl1 class=content cellSpacing=0 cellPadding=8 border=1> <TBODY> <TR align=middle> <TD>row 1<BR>cell 1</TD> <TD>row 1<BR>cell 2</TD> <TD>row 1<BR>cell 3</TD> <TD>row 1<BR>cell 4</TD> <TD>row 1<BR>cell 5</TD></TR> <TR align=middle> <TD>row 2<BR>cell 1</TD> <TD>row 2<BR>cell 2</TD> <TD>row 2<BR>cell 2</TD> <TD>row 2<BR>cell 3</TD> <TD>row 2<BR>cell 5</TD></TR> <TR align=middle> <TD>row 3<BR>cell 1</TD> <TD>row 3<BR>cell 2</TD> <TD>row 3<BR>cell 3</TD> <TD>row 3<BR>cell 4</TD> <TD>row 3<BR>cell 5</TD></TR> <TR align=middle> <TD>row 4<BR>cell 1</TD> <TD>row 4<BR>cell 2</TD> <TD>row 4<BR>cell 3</TD> <TD>row 4<BR>cell 4</TD> <TD>row 4<BR>cell 5</TD></TR> <TR align=middle> <TD>row 5<BR>cell 1</TD> <TD>row 5<BR>cell 2</TD> <TD>row 5<BR>cell 3</TD> <TD>row 5<BR>cell 4</TD> <TD>row 5<BR>cell 5</TD></TR></TBODY></TABLE>Select a Table Gradient Option:<BR><A onclick=tbl1.border=0;this.blur() href="#">Remove Border</A> | <A onclick=tbl1.border=1;this.blur() href="#">Add Border</A> | <A onclick=doGradient(0) href="#">(0) Checkerboard</A><BR><A onclick=doGradient(1) href="#">(1) bottom left to top right</A> | <A onclick=doGradient(2) href="#">(2) bottom to top</A><BR><A onclick=doGradient(3) href="#">(3) bottom right to top left</A> | <A onclick=doGradient(4) href="#">(4) left to right</A><BR><A onclick=doGradient(5) href="#">(5) whorl</A> | <A onclick=doGradient(6) href="#">(6) right to left</A><BR><A onclick=doGradient(7) href="#">(7) top left to bottom right</A> | <A onclick=doGradient(8) href="#">(8) top to bottom</A><BR><A onclick=doGradient(9) href="#">(9) top right to bottom left</A><BR>Starting color=<FONT color=red>red</FONT>, Ending color=<FONT color=blue>blue</FONT><SCRIPT>/*************************************************************************The Gradient function was tested in IE4 or better and worked quitewell. If other browsers support the bgColor property of cells and the rowsand cells collections of a table, then it should work on those browsers.The gradientArray function returns an array of RGB color values.This is useful if you just want an array of color values ranging from astarting color to an ending color in so many steps. Color values MUST bein #RRGGBB format. Named color values, such as 'red', are not supported.You may also note the direction values are patterned after thenumeric keypad of your keyboard.**************************************************************************/window.defaultStatus=window.document.titlevar red="#ff0000",blue="#0000ff"var tbl1=window.document.getElementById("tbl1")function doGradient(direction){event.srcElement.blur()Gradient(tbl1,red,blue,direction)}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->