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