//-----------------------------------------------------//
//-------------------- degradee.js --------------------//
//-----------------------------------------------------//
// Fun��o para convers�o da parte literal do hexadecimal em decimal
function converter(value) {
value = value.toUpperCase();
switch(value) {
case "A": return 10;
case "B": return 11;
case "C": return 12;
case "D": return 13;
case "E": return 14;
case "F": return 15;
default: return value;
}
}
// Transforma��o da cor passada para decimal
function hexToDec(color) {
if(color.indexOf("#") > -1)
color = color.substr((color.indexOf("#") + 1), color.length);
if(color.length >= 6) {
hexRed = color.substr(0, 2);
hexGreen = color.substr(2, 2);
hexBlue = color.substr(4, 2);
// Para IE
// Se n�o houver a divis�o da string em array, causa erro
hexRed = hexRed.split("");
hexGreen = hexGreen.split("");
hexBlue = hexBlue.split("");
hexRed = ((converter(hexRed[0]) * 16) + (converter(hexRed[1]) * 1));
hexGreen = ((converter(hexGreen[0]) * 16) + (converter(hexGreen[1]) * 1));
hexBlue = ((converter(hexBlue[0]) * 16) + (converter(hexBlue[1]) * 1));
}
else if(color.length >= 3) {
hexRed = color.substr(0, 1);
hexGreen = color.substr(1, 1);
hexBlue = color.substr(2, 1);
hexRed = (converter(hexRed) * 16);
hexGreen = (converter(hexGreen) * 16);
hexBlue = (converter(hexBlue) * 16);
}
else {
hexRed = 0;
hexGreen = 0;
hexBlue = 0;
}
return [hexRed, hexGreen, hexBlue];
}
// Verifica se o valor � hexadecimal ou n�o
function isHex(value) {
validChars = "0123456789ABCDEF";
for(i = 0; i < value.length; i++) {
if(validChars.indexOf(value.toUpperCase().charAt(i)) < 0)
return false;
else
return true;
}
}
// Exibe o degradee
function showScalingColor(iniColor, endColor, local, height, width) {
// Verifica se os valores passados s�o hexadecimais
iniColor = (isHex(iniColor)) ? hexToDec(iniColor) : hexToDec("#FFFFFF");
endColor = (isHex(endColor)) ? hexToDec(endColor) : hexToDec("#000000");
// Define a altura e largura da barra com o degrade�
nHeight = (height) ? height : "2";
nWidth = (width) ? width : "200";
// Cria a tabela e a linha da tabela, definindo as propriedades
table = window.document.createElement("table");
table.border = "0";
table.cellPadding = "0";
table.cellSpacing = "0";
table.style.width = nWidth;
table.style.height = nHeight;
tr = window.document.createElement("tr");
// Cria as c�lulas com as cores de fundo em degrade�
while(iniColor[0] != endColor[0] || iniColor[1] != endColor[1] || iniColor[2] != endColor[2]) {
td = window.document.createElement("td");
td.style.background = "rgb(" + iniColor[0] + "," + iniColor[1] + "," + iniColor[2] + ")";
tr.appendChild(td);
if(iniColor[0] > endColor[0]) iniColor[0]--;
else if(iniColor[0] < endColor[0]) iniColor[0]++;
if(iniColor[1] > endColor[1]) iniColor[1]--;
else if(iniColor[1] < endColor[1]) iniColor[1]++;
if(iniColor[2] > endColor[2]) iniColor[2]--;
else if(iniColor[2] < endColor[2]) iniColor[2]++;
}
// Adiciona a linha com as c�lulas na tabela
table.appendChild(tr);
// Adiciona a tabela na p�gina
if(local)
window.document.getElementById(local).appendChild(table);
else
window.document.body.appendChild(table)
}
//---------------------------------------------------------------//
//-------------------- Exemplo de utiliza��o --------------------//
//---------------------------------------------------------------//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> D�grad�e </title>
<script language="javascript" src="./degradee.js"></script>
</head>
<body>
<div id="container">
<form>
<table border="0" cellpadding="0" cellspacing="0" style="font-size:12px; font-family:verdana">
<tr>
<td>Cor inicial:</td><td><input type="text" name="ini"> (3 ou 6 caract�res)</td>
</tr>
<tr>
<td>Cor final:</td><td><input type="text" name="end"> (3 ou 6 caract�res)</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Criar degrade�" onClick="showScalingColor(window.document.forms[0][0].value, window.document.forms[0][1].value, 'container', '20', '600'); window.document.forms[0][0].focus();"></td>
</tr>
</table>
</form>
</div>
</body>
</html>