Seleccionar color desde una paleta de colores y pasar valor

Maru77 · #1 (**permalink**) 26/04/2012, 22:09

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!

repara2 · #2 (**permalink**) 27/04/2012, 00:16

Por favor consulta un foro / tutorial de javascript.