Hola a todos.
Primero les aviso que mi Javascript es muy basico.
Tengo un codigo HTML-JavaScript que baje de una pagina, y que selecciona un color de una paleta de colores y lo introduce en un campo de texto ( <input> ).
Pueden verlo en funcionamiento en esta URL (Es el selector de colores basicos, el segundo):
http://www.sahuaromex.com/accesorios_gratis.phpComo verán hay un campo de texto que es donde aparece el color seleccionado y otro campo que aparece la muestra del color.
Bueno, lo que quiero es que haya varios capos de texto. Supongo que habra que crear alguna funcion para que depende del campo de texto que se encuentra seleccionado se introduzca el color en ese campo.
Nose si me pudieron entender, yo tengo muy pocos conocimientos de javascript asi que recurri a pedir ayuda :'(
dejo el codigo del archivo
<html>
<head>
<style type="text/css">
<!--
/* Estilo para el campo donde se muestra el codigo del color
puede modificarse a gusto */
.hielo_hex {
font-size: 11pt;
font-family: arial;
font-weight: bold;
color: #000099;
border-style: solid;
border-color: #000099;
border-width: 2px;
background-color: #FFFFFF;
}
-->
</style>
<script language = "javascript">
<!--
/* Funcion para mostrar el color que se ponga en el campo de texto */
function arrange(cambiar){
if(document.areas.hexvalue.value.length == 7){
setcolor(cambiar)
}
/* si el codigo introducido es menor o superior de 7 cifras nos alerta */
else { window.alert("Color mal seleccionado"); }
}
/* Funcion para mostrar el color que se haya seleccionado */
function setcolor(hex_color){
document.colores.hexvalue.value=hex_color
document.colores.selcolor.style.backgroundColor=hex_color
}
function arrange2(cambiar){
if(document.areas.hexvalue2.value.length == 7){
setcolor(cambiar)
}
/* si el codigo introducido es menor o superior de 7 cifras nos alerta */
else { window.alert("Color mal seleccionado"); }
}
/* Funcion para mostrar el color que se haya seleccionado */
function setcolor2(hex_color){
document.colores.hexvalue2.value=hex_color
document.colores.selcolor2.style.backgroundColor=hex_color
}
//-->
</script></head>
<body>
<form name="colores">
<table border="0" width="290" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"></td>
</tr>
</table>
<table border="0" width="100" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<table cellSpacing="1" cellPadding="0" width="360" border="0">
<tr>
<td bgColor="#006600" onClick="setcolor('#006600')" height="20"></td>
<td bgColor="#006633" onClick="setcolor('#006633')"></td>
<td bgColor="#006666" onClick="setcolor('#006666')"></td>
<td bgColor="#006699" onClick="setcolor('#006699')"></td>
<td bgColor="#0066CC" onClick="setcolor('#0066CC')"></td>
<td bgColor="#0066FF" onClick="setcolor('#0066FF')"></td>
<td bgColor="#003300" onClick="setcolor('#003300')"></td>
<td bgColor="#003333" onClick="setcolor('#003333')"></td>
<td bgColor="#003366" onClick="setcolor('#003366')"></td>
<td bgColor="#003399" onClick="setcolor('#003399')"></td>
<td bgColor="#0033CC" onClick="setcolor('#0033CC')"></td>
<td bgColor="#0033FF" onClick="setcolor('#0033FF')"></td>
<td bgColor="#000000" onClick="setcolor('#000000')"></td>
<td bgColor="#000033" onClick="setcolor('#000033')"></td>
<td bgColor="#000066" onClick="setcolor('#000066')"></td>
<td bgColor="#000099" onClick="setcolor('#000099')"></td>
<td bgColor="#0000CC" onClick="setcolor('#0000CC')"></td>
<td bgColor="#0000FF" onClick="setcolor('#0000FF')"></td>
</tr>
<tr>
<td bgColor="#336600" onClick="setcolor('#336600')" height="20"></td>
<td bgColor="#336633" onClick="setcolor('#336633')"></td>
<td bgColor="#336666" onClick="setcolor('#336666')"></td>
<td bgColor="#336699" onClick="setcolor('#336699')"></td>
<td bgColor="#3366CC" onClick="setcolor('#3366CC')"></td>
<td bgColor="#3366FF" onClick="setcolor('#3366FF')"></td>
<td bgColor="#333300" onClick="setcolor('#333300')"></td>
<td bgColor="#333333" onClick="setcolor('#333333')"></td>
<td bgColor="#333366" onClick="setcolor('#333366')"></td>
<td bgColor="#333399" onClick="setcolor('#333399')"></td>
<td bgColor="#3333CC" onClick="setcolor('#3333CC')"></td>
<td bgColor="#3333FF" onClick="setcolor('#3333FF')"></td>
<td bgColor="#330000" onClick="setcolor('#330000')"></td>
<td bgColor="#330033" onClick="setcolor('#330033')"></td>
<td bgColor="#330066" onClick="setcolor('#330066')"></td>
<td bgColor="#330099" onClick="setcolor('#330099')"></td>
<td bgColor="#3300CC" onClick="setcolor('#3300CC')"></td>
<td bgColor="#3300FF" onClick="setcolor('#3300FF')"></td>
</tr>
<tr>
<td bgColor="#666600" onClick="setcolor('#666600')" height="20"></td>
<td bgColor="#666633" onClick="setcolor('#666633')"></td>
<td bgColor="#666666" onClick="setcolor('#666666')"></td>
<td bgColor="#666699" onClick="setcolor('#666699')"></td>
<td bgColor="#6666CC" onClick="setcolor('#6666CC')"></td>
<td bgColor="#6666FF" onClick="setcolor('#6666FF')"></td>
<td bgColor="#663300" onClick="setcolor('#663300')"></td>
<td bgColor="#663333" onClick="setcolor('#663333')"></td>
<td bgColor="#663366" onClick="setcolor('#663366')"></td>
<td bgColor="#663399" onClick="setcolor('#663399')"></td>
<td bgColor="#6633CC" onClick="setcolor('#6633CC')"></td>
<td bgColor="#6633FF" onClick="setcolor('#6633FF')"></td>
<td bgColor="#660000" onClick="setcolor('#660000')"></td>
<td bgColor="#660033" onClick="setcolor('#660033')"></td>
<td bgColor="#660066" onClick="setcolor('#660066')"></td>
<td bgColor="#660099" onClick="setcolor('#660099')"></td>
<td bgColor="#6600CC" onClick="setcolor('#6600CC')"></td>
<td bgColor="#6600FF" onClick="setcolor('#6600FF')"></td>
</tr>
<tr>
<td bgColor="#996600" onClick="setcolor('#996600')" height="20"></td>
<td bgColor="#996633" onClick="setcolor('#996633')"></td>
<td bgColor="#996666" onClick="setcolor('#996666')"></td>
<td bgColor="#996699" onClick="setcolor('#996699')"></td>
<td bgColor="#9966CC" onClick="setcolor('#9966CC')"></td>
<td bgColor="#9966FF" onClick="setcolor('#9966FF')"></td>
<td bgColor="#993300" onClick="setcolor('#993300')"></td>
<td bgColor="#993333" onClick="setcolor('#993333')"></td>
<td bgColor="#993366" onClick="setcolor('#993366')"></td>
<td bgColor="#993399" onClick="setcolor('#993399')"></td>
<td bgColor="#9933CC" onClick="setcolor('#9933CC')"></td>
<td bgColor="#9933FF" onClick="setcolor('#9933FF')"></td>
<td bgColor="#990000" onClick="setcolor('#990000')"></td>
<td bgColor="#990033" onClick="setcolor('#990033')"></td>
<td bgColor="#990066" onClick="setcolor('#990066')"></td>
<td bgColor="#990099" onClick="setcolor('#990099')"></td>
<td bgColor="#9900CC" onClick="setcolor('#9900CC')"></td>
<td bgColor="#9900FF" onClick="setcolor('#9900FF')"></td>
</tr>
<tr>
<td bgColor="#CC6600" onClick="setcolor('#CC6600')" height="20"></td>
<td bgColor="#CC6633" onClick="setcolor('#CC6633')"></td>
<td bgColor="#CC6666" onClick="setcolor('#CC6666')"></td>
<td bgColor="#CC6699" onClick="setcolor('#CC6699')"></td>
<td bgColor="#CC66CC" onClick="setcolor('#CC66CC')"></td>
<td bgColor="#CC66FF" onClick="setcolor('#CC66FF')"></td>
<td bgColor="#CC3300" onClick="setcolor('#CC3300')"></td>
<td bgColor="#CC3333" onClick="setcolor('#CC3333')"></td>
<td bgColor="#CC3366" onClick="setcolor('#CC3366')"></td>
<td bgColor="#CC3399" onClick="setcolor('#CC3399')"></td>
<td bgColor="#CC33CC" onClick="setcolor('#CC33CC')"></td>
<td bgColor="#CC33FF" onClick="setcolor('#CC33FF')"></td>
<td bgColor="#CC0000" onClick="setcolor('#CC0000')"></td>
<td bgColor="#CC0033" onClick="setcolor('#CC0033')"></td>
<td bgColor="#CC0066" onClick="setcolor('#CC0066')"></td>
<td bgColor="#CC0099" onClick="setcolor('#CC0099')"></td>
<td bgColor="#CC00CC" onClick="setcolor('#CC00CC')"></td>
<td bgColor="#CC00FF" onClick="setcolor('#CC00FF')"></td>
</tr>
<tr>
<td bgColor="#FF6600" onClick="setcolor('#FF6600')" height="20"></td>
<td bgColor="#FF6633" onClick="setcolor('#FF6633')"></td>
<td bgColor="#FF6666" onClick="setcolor('#FF6666')"></td>
<td bgColor="#FF6699" onClick="setcolor('#FF6699')"></td>
<td bgColor="#FF66CC" onClick="setcolor('#FF66CC')"></td>
<td bgColor="#FF66FF" onClick="setcolor('#FF66FF')"></td>
<td bgColor="#FF3300" onClick="setcolor('#FF3300')"></td>
<td bgColor="#FF3333" onClick="setcolor('#FF3333')"></td>
<td bgColor="#FF3366" onClick="setcolor('#FF3366')"></td>
<td bgColor="#FF3399" onClick="setcolor('#FF3399')"></td>
<td bgColor="#FF33CC" onClick="setcolor('#FF33CC')"></td>
<td bgColor="#FF33FF" onClick="setcolor('#FF33FF')"></td>
<td bgColor="#FF0000" onClick="setcolor('#FF0000')"></td>
<td bgColor="#FF0033" onClick="setcolor('#FF0033')"></td>
<td bgColor="#FF0066" onClick="setcolor('#FF0066')"></td>
<td bgColor="#FF0099" onClick="setcolor('#FF0099')"></td>
<td bgColor="#FF00CC" onClick="setcolor('#FF00CC')"></td>
<td bgColor="#FF00FF" onClick="setcolor('#FF00FF')"></td>
</tr>
<tr>
<td bgColor="#00FF00" onClick="setcolor('#00FF00')" height="20"></td>
<td bgColor="#00FF33" onClick="setcolor('#00FF33')"></td>
<td bgColor="#00FF66" onClick="setcolor('#00FF66')"></td>
<td bgColor="#00FF99" onClick="setcolor('#00FF99')"></td>
<td bgColor="#00FFCC" onClick="setcolor('#00FFCC')"></td>
<td bgColor="#00FFFF" onClick="setcolor('#00FFFF')"></td>
<td bgColor="#00CC00" onClick="setcolor('#00CC00')"></td>
<td bgColor="#00CC66" onClick="setcolor('#00CC66')"></td>
<td bgColor="#00CC66" onClick="setcolor('#00CC66')"></td>
<td bgColor="#00CC99" onClick="setcolor('#00CC99')"></td>
<td bgColor="#00CCCC" onClick="setcolor('#00CCCC')"></td>
<td bgColor="#00CCFF" onClick="setcolor('#00CCFF')"></td>
<td bgColor="#009900" onClick="setcolor('#009900')"></td>
<td bgColor="#009933" onClick="setcolor('#009933')"></td>
<td bgColor="#009966" onClick="setcolor('#009966')"></td>
<td bgColor="#009999" onClick="setcolor('#009999')"></td>
<td bgColor="#0099CC" onClick="setcolor('#0099CC')"></td>
<td bgColor="#0099FF" onClick="setcolor('#0099FF')"></td>
</tr>
<tr>
<td bgColor="#33FF00" onClick="setcolor('#33FF00')" height="20"></td>
<td bgColor="#33FF33" onClick="setcolor('#33FF33')"></td>
<td bgColor="#33FF66" onClick="setcolor('#33FF66')"></td>
<td bgColor="#33FF99" onClick="setcolor('#33FF99')"></td>
<td bgColor="#33FFCC" onClick="setcolor('#33FFCC')"></td>
<td bgColor="#33FFFF" onClick="setcolor('#33FFFF')"></td>
<td bgColor="#33CC00" onClick="setcolor('#33CC00')"></td>
<td bgColor="#33CC33" onClick="setcolor('#33CC33')"></td>
<td bgColor="#33CC66" onClick="setcolor('#33CC66')"></td>
<td bgColor="#33CC99" onClick="setcolor('#33CC99')"></td>
<td bgColor="#33CCCC" onClick="setcolor('#33CCCC')"></td>
<td bgColor="#33CCFF" onClick="setcolor('#33CCFF')"></td>
<td bgColor="#339900" onClick="setcolor('#339900')"></td>
<td bgColor="#339933" onClick="setcolor('#339933')"></td>
<td bgColor="#339966" onClick="setcolor('#339966')"></td>
<td bgColor="#339999" onClick="setcolor('#339999')"></td>
<td bgColor="#3399CC" onClick="setcolor('#3399CC')"></td>
<td bgColor="#3399FF" onClick="setcolor('#3399FF')"></td>
</tr>
<tr>
<td bgColor="#66FF00" onClick="setcolor('#66FF00')" height="20"></td>
<td bgColor="#66FF33" onClick="setcolor('#66FF33')"></td>
<td bgColor="#66FF66" onClick="setcolor('#66FF66')"></td>
<td bgColor="#66FF99" onClick="setcolor('#66FF99')"></td>
<td bgColor="#66FFCC" onClick="setcolor('#66FFCC')"></td>
<td bgColor="#66FFFF" onClick="setcolor('#66FFFF')"></td>
<td bgColor="#66CC00" onClick="setcolor('#66CC00')"></td>
<td bgColor="#66CC33" onClick="setcolor('#66CC33')"></td>
<td bgColor="#66CC66" onClick="setcolor('#66CC66')"></td>
<td bgColor="#66CC99" onClick="setcolor('#66CC99')"></td>
<td bgColor="#66CCCC" onClick="setcolor('#66CCCC')"></td>
<td bgColor="#66CCFF" onClick="setcolor('#66CCFF')"></td>
<td bgColor="#669900" onClick="setcolor('#669900')"></td>
<td bgColor="#669933" onClick="setcolor('#669933')"></td>
<td bgColor="#669966" onClick="setcolor('#669966')"></td>
<td bgColor="#669999" onClick="setcolor('#669999')"></td>
<td bgColor="#6699CC" onClick="setcolor('#6699CC')"></td>
<td bgColor="#6699FF" onClick="setcolor('#6699FF')"></td>
</tr>
<tr>
<td bgColor="#99FF00" onClick="setcolor('#99FF00')" height="20"></td>
<td bgColor="#99FF33" onClick="setcolor('#99FF33')"></td>
<td bgColor="#99FF66" onClick="setcolor('#99FF66')"></td>
<td bgColor="#99FF99" onClick="setcolor('#99FF99')"></td>
<td bgColor="#99FFCC" onClick="setcolor('#99FFCC')"></td>
<td bgColor="#99FFFF" onClick="setcolor('#99FFFF')"></td>
<td bgColor="#99CC00" onClick="setcolor('#99CC00')"></td>
<td bgColor="#99CC33" onClick="setcolor('#99CC33')"></td>
<td bgColor="#99CC66" onClick="setcolor('#99CC66')"></td>
<td bgColor="#99CC99" onClick="setcolor('#99CC99')"></td>
<td bgColor="#99CCCC" onClick="setcolor('#99CCCC')"></td>
<td bgColor="#99CCFF" onClick="setcolor('#99CCFF')"></td>
<td bgColor="#999900" onClick="setcolor('#999900')"></td>
<td bgColor="#999933" onClick="setcolor('#999933')"></td>
<td bgColor="#999966" onClick="setcolor('#999966')"></td>
<td bgColor="#999999" onClick="setcolor('#999999')"></td>
<td bgColor="#9999CC" onClick="setcolor('#9999CC')"></td>
<td bgColor="#9999FF" onClick="setcolor('#9999FF')"></td>
</tr>
<tr>
<td bgColor="#CCFF00" onClick="setcolor('#CCFF00')" height="20"></td>
<td bgColor="#CCFF33" onClick="setcolor('#CCFF33')"></td>
<td bgColor="#CCFF66" onClick="setcolor('#CCFF66')"></td>
<td bgColor="#CCFF99" onClick="setcolor('#CCFF99')"></td>
<td bgColor="#CCFFCC" onClick="setcolor('#CCFFCC')"></td>
<td bgColor="#CCFFFF" onClick="setcolor('#CCFFFF')"></td>
<td bgColor="#CCCC00" onClick="setcolor('#CCCC00')"></td>
<td bgColor="#CCCC33" onClick="setcolor('#CCCC33')"></td>
<td bgColor="#CCCC66" onClick="setcolor('#CCCC66')"></td>
<td bgColor="#CCCC99" onClick="setcolor('#CCCC99')"></td>
<td bgColor="#CCCCCC" onClick="setcolor('#CCCCCC')"></td>
<td bgColor="#CCCCFF" onClick="setcolor('#CCCCFF')"></td>
<td bgColor="#CC9900" onClick="setcolor('#CC9900')"></td>
<td bgColor="#CC9933" onClick="setcolor('#CC9933')"></td>
<td bgColor="#CC9966" onClick="setcolor('#CC9966')"></td>
<td bgColor="#CC9999" onClick="setcolor('#CC9999')"></td>
<td bgColor="#CC99CC" onClick="setcolor('#CC99CC')"></td>
<td bgColor="#CC99FF" onClick="setcolor('#CC99FF')"></td>
</tr>
<tr>
<td bgColor="#FFFF00" onClick="setcolor('#FFFF00')" height="20"></td>
<td bgColor="#FFFF33" onClick="setcolor('#FFFF33')"></td>
<td bgColor="#FFFF66" onClick="setcolor('#FFFF66')"></td>
<td bgColor="#FFFF99" onClick="setcolor('#FFFF99')"></td>
<td bgColor="#FFFFCC" onClick="setcolor('#FFFFCC')"></td>
<td bgColor="#FFFFFF" onClick="setcolor('#FFFFFF')"></td>
<td bgColor="#FFCC00" onClick="setcolor('#FFCC00')"></td>
<td bgColor="#FFCC33" onClick="setcolor('#FFCC33')"></td>
<td bgColor="#FFCC66" onClick="setcolor('#FFCC66')"></td>
<td bgColor="#FFCC99" onClick="setcolor('#FFCC99')"></td>
<td bgColor="#FFCCCC" onClick="setcolor('#FFCCCC')"></td>
<td bgColor="#FFCCFF" onClick="setcolor('#FFCCFF')"></td>
<td bgColor="#FF9900" onClick="setcolor('#FF9900')"></td>
<td bgColor="#FF9933" onClick="setcolor('#FF9933')"></td>
<td bgColor="#FF9966" onClick="setcolor('#FF9966')"></td>
<td bgColor="#FF9999" onClick="setcolor('#FF9999')"></td>
<td bgColor="#FF99CC" onClick="setcolor('#FF99CC')"></td>
<td bgColor="#FF99FF" onClick="setcolor('#FF99FF')"></td>
</tr>
</table>
</td></tr>
</table>
<table border="0" width="290" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td width="100%">
<table border="0" width="100" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td width="100%">
<table border="0" cellspacing="1" cellpadding="0" width="180">
<tr>
<td bgcolor="#FFFFFF" onClick="setcolor('#FFFFFF')" height="20"></td>
<td bgcolor="#DDDDDD" onClick="setcolor('#DDDDDD')"></td>
<td bgcolor="#C0C0C0" onClick="setcolor('#C0C0C0')"></td>
<td bgcolor="#969696" onClick="setcolor('#969696')"></td>
<td bgcolor="#808080" onClick="setcolor('#808080')"></td>
<td bgcolor="#646464" onClick="setcolor('#646464')"></td>
<td bgcolor="#4B4B4B" onClick="setcolor('#4B4B4B')"></td>
<td bgcolor="#242424" onClick="setcolor('#242424')"></td>
<td bgcolor="#000000" onClick="setcolor('#000000')"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr style="font-family: arial; font-weight: bold; font-size: 10pt;">
<td width="100%" height="10">Codigo del color</td><td>Muestra</td>
</tr>
<tr>
<td width="100%"><input type="text" name="hexvalue" value="#FFFFFF" size="10" class="hielo_hex" onchange="arrange(this.value)"></td> <td><input type="text" name="selcolor" size="5" class="hielo_hex" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="100%"><input type="text" name="hexvalue2" value="#FFFFFF" size="10" class="hielo_hex" onchange="arrange2(this.value)"></td> <td><input type="text" name="selcolor2" size="5" class="hielo_hex" onfocus="this.blur()"></td>
</tr>
</table>
</form>
</body>
</html>
Bueno, espero que alguien se le ocurra algo... Gracias
