Hola!
Tengo un formulario con un campo y un link que abre una paleta de colores
Código HTML:
<input type="text" name="color" size="24">
<a href="#" onClick="window.open('paleta.php','', 'width=400,height=300,left=600,top=250,scrollbars=yes');">Seleccionar Color</a> Y este es el script de la paleta
Código HTML:
<script language = "javascript" type="text/javascript">
<!--
function shouldset(passon){
if(document.areas.hexvalue.value.length == 7){setcolor(passon)}
}
function setcolor(elem){
document.areas.hexvalue.value=elem
document.areas.selcolor.style.backgroundColor=elem
}
//-->
</script>
<form name="areas">
<table border="0" width="100" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<table cellSpacing="1" cellPadding="0" width="100" border="0">
<tr>
<td bgColor="#00FF00"><a href="javascript:setcolor('#00FF00')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF33"><a href="javascript:setcolor('#00FF33')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF66"><a href="javascript:setcolor('#00FF66')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FF99"><a href="javascript:setcolor('#00FF99')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FFCC"><a href="javascript:setcolor('#00FFCC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00FFFF"><a href="javascript:setcolor('#00FFFF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC00"><a href="javascript:setcolor('#00CC00')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC66"><a href="javascript:setcolor('#00CC66')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC66"><a href="javascript:setcolor('#00CC66')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CC99"><a href="javascript:setcolor('#00CC99')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CCCC"><a href="javascript:setcolor('#00CCCC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#00CCFF"><a href="javascript:setcolor('#00CCFF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#009900"><a href="javascript:setcolor('#009900')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#009933"><a href="javascript:setcolor('#009933')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#009966"><a href="javascript:setcolor('#009966')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#009999"><a href="javascript:setcolor('#009999')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#0099CC"><a href="javascript:setcolor('#0099CC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#0099FF"><a href="javascript:setcolor('#0099FF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
</tr>
<tr>
<td bgColor="#33FF00"><a href="javascript:setcolor('#33FF00')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF33"><a href="javascript:setcolor('#33FF33')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF66"><a href="javascript:setcolor('#33FF66')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FF99"><a href="javascript:setcolor('#33FF99')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FFCC"><a href="javascript:setcolor('#33FFCC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33FFFF"><a href="javascript:setcolor('#33FFFF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC00"><a href="javascript:setcolor('#33CC00')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC33"><a href="javascript:setcolor('#33CC33')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC66"><a href="javascript:setcolor('#33CC66')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CC99"><a href="javascript:setcolor('#33CC99')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CCCC"><a href="javascript:setcolor('#33CCCC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#33CCFF"><a href="javascript:setcolor('#33CCFF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#339900"><a href="javascript:setcolor('#339900')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#339933"><a href="javascript:setcolor('#339933')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#339966"><a href="javascript:setcolor('#339966')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#339999"><a href="javascript:setcolor('#339999')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#3399CC"><a href="javascript:setcolor('#3399CC')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgColor="#3399FF"><a href="javascript:setcolor('#3399FF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
</tr>
</table>
</td></tr>
</table>
<table border="0" width="290" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><img border="0" src="11dot.gif" width="50" 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" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF"><a href="javascript:setcolor('#FFFFFF')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#DDDDDD"><a href="javascript:setcolor('#DDDDDD')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#C0C0C0"><a href="javascript:setcolor('#C0C0C0')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#969696"><a href="javascript:setcolor('#969696')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#808080"><a href="javascript:setcolor('#808080')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#646464"><a href="javascript:setcolor('#646464')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#4B4B4B"><a href="javascript:setcolor('#4B4B4B')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#242424"><a href="javascript:setcolor('#242424')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
<td bgcolor="#000000"><a href="javascript:setcolor('#000000')"><img border="0" src="11dot.gif" width="15" height="15"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%"><div align="center">
<input type="text" name="hexvalue" value="#FFFFFF" size="10" class="formu2" onchange="shouldset(this.value)">
<input type="text" name="selcolor" size="24" class="formu2" onfocus="this.blur()">
</div></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<a href="#"> Agregar Color </a>
</body>
</html> Pero necesito que una vez seleccionado el color hacer click en "agregar color" y el valor hexadecimal se vea reflejado en el campo de formulario inicial.
Gracias de antemano!