rellenar campo con codigo de color

vissiontotal · #1 (**permalink**) 21/01/2009, 18:51

hola amigos tengo este codigo en el que se puede seleccionar cambiar el color del texto o del fondo o del borde y funciona bien. pero no se como hacerle para rellenar automaticamente los campos en el mismo formulario a la hora de seleccionar un color... ya sea texto, fondo o borbe....

este es el codigo...........

<script type="text/javascript" src="colores.js"></script>
<script type="text/javascript" >

var colorcolor2 = "#CC0033";
function metodocolor2(color) {
document.getElementById("ej1").style.color = "#" + color;
//alert(color);
}

var colorcolor3 = "#FFCCCC";
function metodocolor3(color) {
document.getElementById("ej1").style.backgroundCol or = "#" + color;
}

var colorvisual1 = "#FF6633";
function metodovisual1(color) {
alert(color);
}
var colorvisual = "#FF6633";
function metodovisual(color) {
alert(color);
}

var multicolor = colorcolormulti = "#CC0033";
var multibackgroundColor = "#FFCCCC";
var multiborderColor = "#333366";

function metodocolormulti(color) {
elemento = document.forms.ejemplo2["donde"].value;
document.getElementById("ej2").style[elemento] = "#" + color;
window["multi" + elemento] = "#" + color;
}

function activar(elemento) {
activaColor("colormulti", window["multi" + elemento]);
}

</script>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

h1.titulo {
text-align: center;
background: #eeeeee url(../dibujos/miemoticon.gif) no-repeat 2% 50%;
height: 50px;
color: black;
padding-top: 0;
}

div.contenedor {
margin: auto;
padding: 2%;
}

h2 {
/*background-color: #FFDDEE;
color: #012345;*/
margin: 2px 5px;
padding-left: 2%;
}

p {
text-align: justify;
text-indent: 1cm;
margin: 0% 3%;
}

</style>
</head>
<body >
<h1 class="titulo">
Colores
</h1>
<h2><br/>
</h2>
<div class="contenedor" >
<hr/>
</div>

<div class="contenedor" >
<form name="ejemplo2" action="" method="get" style="display: inline">
<p>
También puede reutilizarse la misma paleta para editar/modificar varios elementos:
<select name="donde" onChange="activaColor('colormulti', window['multi' + this.value])" >
<option value="color" selected >Texto</option>
<option value="backgroundColor">Fondo</option>
<option value="borderColor">Borde</option>
</select>
</p>
<p>Este es el color del texto
<label>
<input type="text" name="color del texto" id="color del texto">
</label>
</p>
<p>Este es el color del fondo
<label>
<input type="text" name="color del fondo" id="color del fondo">
</label>
</p>
<p>Este es el color del borde
<label>
<input type="text" name="color del borde" id="color del borde">
</label>
</p>
<p> </p>
</form>

<br />
<script type="text/javascript">
ponerPaleta("colormulti", 10, multicolor);
</script>
</div>

<div id="ej2" class="contenedor"
style="border: 5px solid #333366; width: 300px; text-align: center; color: #CC0033; background-color: #FFCCCC; font-size: 1.1em">
<b>Ejemplo</b><br />
Seleccione el color y el elemento
<br />
que quiera modificar
</div>

aqui lo puden ver funcionando.........

http://www.tirodeeskina.com/colores.php

sweetlydark · #2 (**permalink**) 21/01/2009, 19:07

puedes usar lo mismo que usas para el borde/background/texto para eso. Osea usa getElementById asi:

document.getElementById("valorDeID").value = "#" + color;

vissiontotal · #3 (**permalink**) 21/01/2009, 19:15

Agradezco la pronta respuesta pero no tengo ni idea de como hacerlo.... si pudieeras hecharme una mano........ de perdis un norte de como hacerle...... te lo agradecre mucho

sweetlydark · #4 (**permalink**) 21/01/2009, 20:27

Que usas para cambiar los colores de ej2?

vissiontotal · #5 (**permalink**) 22/01/2009, 09:34

Aqui encontre la funcion ponerPaleta pero no tengo ni idea.... de como hacerle para que se rellenen los campos del formulario.................. a lo mejor es algo sencillo pero no doy con la solucion.... ya estudie la funcion para ver como pone los colores pero no le doy.....

var ___d = "0369CF";
function ponColor(r,g,b) {
return "#" + ___d.charAt(r) + ___d.charAt(r) + ___d.charAt(g) + ___d.charAt(g) + ___d.charAt(b) + ___d.charAt(b);
}

function asignaColor(elemento) {
donde = elemento.substr(0, elemento.length - 6);
color = elemento.substr(donde.length);
window["metodo" + donde](color);
__elemento = window["color" + donde];
if (document.getElementById(donde + __elemento.substr(1)))
document.getElementById(donde + __elemento.substr(1)).style.borderStyle = "solid";
window["color" + donde] = "#" + color;
document.getElementById(elemento).style.borderStyl e = "inset";
document.getElementById("muestra" + donde).style.backgroundColor = "#" + color;
if (document.all) event.returnValue = false;
}

function activaColor(idBase, color) {
document.getElementById(idBase + window["color" + idBase].substr(1)).style.borderStyle = "solid";
document.getElementById(idBase + color.substr(1)).style.borderStyle = "inset";
document.getElementById("muestra" + idBase).style.backgroundColor = color;
window["color" + idBase] = color;
}

function ponerPaleta(idBase, tamCelda, color) {
var tamCeldaMax = tamCelda + 4;// añadimos 2 pixeles por lado para el borde
var alto = tamCeldaMax * 6;
var ancho = alto * 7;
var digitos = "0369CF";
var estilosContenedor = "margin: auto; border: 1px solid gray; position: relative; width:" + (ancho + 8);
estilosContenedor += "px; height: " + (alto + 4) + "px";
document.writeln("<div style='" + estilosContenedor + "' >");
var estilosCelda = "position: absolute; overflow: hidden; cursor: pointer; ";
estilosCelda += "; margin: 0; width: " + tamCeldaMax + "px; height: " + tamCeldaMax + "px; ";
for (var i = 0, total = digitos.length; i < total; i ++)
for (var j = 0; j < total; j ++)
for (var k = 0; k < total; k ++) {
esteColor = ponColor(i, j, k);
esteBorde = (esteColor == color) ? "2px inset #eeeeee" : "2px solid #eeeeee";
document.writeln("<div style='" + estilosCelda);
document.writeln("; left: " + (((i * total) + j) * tamCeldaMax) + "px;");
document.writeln("top: " + (k * tamCeldaMax) + "px;");
document.writeln(" border: " + esteBorde);
document.writeln("; background-color: " + esteColor);

document.write("' title='");
document.write(esteColor.substr(1));
document.write("' onclick='asignaColor(this.id)'");
document.write(" id='" + idBase + esteColor.substr(1) + "'");
document.writeln("></div>\n");
}
var estilosMuestra = "width: " + (alto - 2) + "px; height:" + (alto - 2) + "px; background-color: ";
estilosMuestra += color + "; top: 2px; left: " + (ancho - alto + 6) + "px; border: 1px solid black; position: absolute";
document.writeln("<div id='muestra" + idBase + "' style='" + estilosMuestra + "'></div>");
document.writeln("</div>");
}
/*
function tipoPaleta(columnas, proporcional) {
// proporcional = true: rectangular ... false: del ancho del bloque
columnasTemp = (columnas > 6) ? 6 : columnas
this.filas = parseInt(6 / columnasTemp);
this.columnas = 6 / this.filas;
this.proporcional = proporcional;
}
*/

function ponerPaleta2(idBase, tamCelda, color, columnas, proporcional, mostrar) {

function tipoPaleta(columnas, proporcional) {
// proporcional = true: rectangular ... false: del ancho del bloque
columnasTemp = (columnas > 6) ? 6 : columnas
this.filas = parseInt(6 / columnasTemp);
this.columnas = 6 / this.filas;
this.proporcional = proporcional;
}

tipo = new tipoPaleta(columnas, proporcional);
var tamCeldaMax = tamCelda + 4;// añadimos 2 pixeles por lado para el borde
var bloque = tamCeldaMax * 6;
var alto = bloque * tipo.filas;
var ancho = bloque * tipo.columnas + 4;

var estilosContenedor = "margin: auto; border: 1px solid gray; position: relative; width: ";
estilosContenedor += (!mostrar) ? ancho : (tipo.proporcional) ? (ancho + alto + 2) : (ancho + bloque + 4);
estilosContenedor += "px; height: ";
estilosContenedor += (alto + 4) + "px";

var estilosVisor = (mostrar) ? "display: block; " : "display: none; ";
estilosVisor += "position: absolute; border: 1px solid gray; background-color: ";
estilosVisor += color;
estilosVisor += "; width: ";
estilosVisor += (tipo.proporcional) ? (alto - 2) : bloque;
estilosVisor += "px; height: ";
estilosVisor += (true) ? (alto - 2) : bloque;
estilosVisor += "px; top: ";
estilosVisor += (true) ? 2 : bloque;
estilosVisor += "px; left: ";
estilosVisor += (true) ? ancho : bloque;
estilosVisor += "px; ";
var salida = "";
var posX, posY, _i, _j;
var digitos = "0369CF";
salida += "<div style='" + estilosContenedor + "' >";
var estilosCelda = "position: absolute; overflow: hidden; cursor: pointer; ";
estilosCelda += "margin: 0; width: " + tamCeldaMax + "px; height: " + tamCeldaMax + "px; ";
for (var i = 0, total = digitos.length; i < total; i ++) {

_j = (i % tipo.filas);
_i = parseInt(i / tipo.filas);

for (var j = 0; j < total; j ++) {
for (var k = 0; k < total; k ++) {

posX = (k * tamCeldaMax) + _i * bloque;
posY = (j * tamCeldaMax) + (_j * bloque);
esteColor = ponColor(5 - i, 5 - j, 5 - k);
esteBorde = (esteColor == color) ? "2px inset #eeeeee" : "2px solid #eeeeee";
salida += "\n<div style='" + estilosCelda;
salida += "left: " + posX + "px; ";
salida += "top: " + posY + "px;";
salida += " border: " + esteBorde;
salida += "; background-color: " + esteColor;

salida += "' title='";
salida += esteColor.substr(1);
salida += "' onclick='asignaColor(this.id)'";
salida += " id='" + idBase + esteColor.substr(1) + "'";
salida += "></div>\n";
}
}
}
salida += "<div id='muestra" + idBase + "' style='" + estilosVisor + ";'></div>";
salida += "</div>";
return salida;
}

posman · #6 (**permalink**) 22/01/2009, 10:03

Trata con esta funcion. Es la funcion asignaColor modificada:

Código:

function asignaColor(elemento)	{
	donde = elemento.substr(0, elemento.length - 6);
	color = elemento.substr(donde.length);
	window["metodo" + donde](color);
	__elemento = window["color" + donde];
	if (document.getElementById(donde + __elemento.substr(1)))
		document.getElementById(donde + __elemento.substr(1)).style.borderStyle = "solid";
	window["color" + donde] = "#" + color;
	document.getElementById(elemento).style.borderStyle = "inset";
	document.getElementById("muestra" + donde).style.backgroundColor = "#" + color;

	/* ----- aqui comienza la modificacion ----- */
	switch (document.getElementById("donde").selectedIndex) {
		//texto
		case 0 :
			document.getElementById('color_del_texto').value = '#' + color;
			break;
		//fondo
		case 1 :
			document.getElementById('color_del_fondo').value = '#' + color;
			break;
		//border
		case 2 :
			document.getElementById('color_del_borde').value = '#' + color;
			break;
	}
	/* ----- aqui termina la modificacion ----- */
	if (document.all)	event.returnValue = false;
}

NOTA En el formulario cambia los atributos name y ID reemplazando los espacios por guion bajo

Código:

<input type="text" name="color_del_texto" id="color_del_texto">

vissiontotal · #7 (**permalink**) 22/01/2009, 11:15

Muchas gracias amigo............ ya quedo

eso era lo que buscaba. y practicamente me hiciste el trozo de codigo que faltaba.......... yo no hubiera podido hacerlo........ con lo poco que conozco de php ya le estoy haciendo las demás modificaciones para poder cambiar los colores en la base de datos y que automaticamente cuando se llame a la pagina tome primero los colores que ya estan guardados en la BD..........

Muchas gracias......................