marzo 23 - 2007 
Andrés Villanueva Manjarres Hace unos días me pidieron desarrollar una paleta de colores para que los usuarios pudieran seleccionar un color de un listado de colores corporativos. Encontré algunas opciones pero ninguna se adecuaba a lo que me pedían, por esa razón desarrolle el siguiente script que se ajusta perfectamente a las necesidades del cliente y sin duda puede ayudar a algunos desarrolladores..
Para esto se desarrolló un script en javascript. A continuación presento la solución que desarrolle para solucionar este problema, ojala les sirva.
Código Javascript
<script language=”JavaScript”>
lck=0;
function r(hval)
{
if ( lck == 0 )
{
document.formelia.color.value=hval;
}
}function l()
{
if (lck == 0)
{
lck = 1;
} else {
lck = 0;
}
}
</script>
lck=0;
function r(hval)
{
if ( lck == 0 )
{
document.formelia.color.value=hval;
}
}function l()
{
if (lck == 0)
{
lck = 1;
} else {
lck = 0;
}
}
</script>
Código HTML
<form id=”formelia” name=”formelia” method=”post” action=”editoregistro.PHP”>
<table border=”0″ height=”18″>
<tr>
<td> <input type=”text” size=”8″ maxlength=7 name=”color” value=”" readonly> </td>
<td height=”18″ bgcolor=”#A8A9AC”><a href=”JavaScript:l()” onmouseover=”r(‘#A8A9AC’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#BDBEC0″><a href=”JavaScript:l()” onMouseOver=”r(‘#BDBEC0′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#D3DCE3″><a href=”JavaScript:l()” onMouseOver=”r(‘#D3DCE3′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#FFFFFF”><a href=”JavaScript:l()” onMouseOver=”r(‘#FFFFFF’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#FF0000″><a href=”JavaScript:l()” onMouseOver=”r(‘#FF0000′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#0000FF”><a href=”JavaScript:l()” onMouseOver=”r(‘#0000FF’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
</tr>
</table>
</form>
<table border=”0″ height=”18″>
<tr>
<td> <input type=”text” size=”8″ maxlength=7 name=”color” value=”" readonly> </td>
<td height=”18″ bgcolor=”#A8A9AC”><a href=”JavaScript:l()” onmouseover=”r(‘#A8A9AC’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#BDBEC0″><a href=”JavaScript:l()” onMouseOver=”r(‘#BDBEC0′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#D3DCE3″><a href=”JavaScript:l()” onMouseOver=”r(‘#D3DCE3′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#FFFFFF”><a href=”JavaScript:l()” onMouseOver=”r(‘#FFFFFF’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#FF0000″><a href=”JavaScript:l()” onMouseOver=”r(‘#FF0000′); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
<td height=”18″ bgcolor=”#0000FF”><a href=”JavaScript:l()” onMouseOver=”r(‘#0000FF’); return true”><img src=”images/col.png” height=18 width=10 border=0></a></td>
</tr>
</table>
</form>
Publicado en 
Tags:
Invitado dice:
Necesito la paleta de colores.
admin dice:
Hola, al final del artículo hay un link “Ver Ejemplo Paleta de Colores” que te lleva al ajemplo de la paleta de colores, adicionalmente en el artuculo esta todo el codigo fuente para solucionar el problema.
Invitado dice:
fue de mucha ayuda gracias
Invitado dice:
muchas gracias por ele ejemplo de la paleta de colores, eme ha servido mucho.
Invitado dice:
Esta es una prueba…
Invitado dice:
Probando la paleta de colores
Invitado dice:
bueno, Muchas gracias man
Invitado dice:
La imagen “images/col.png” a que imagen se refiere?
Gracias.
admin dice:
Es una imagen transparente necesaria para que se muestre el bgcolor de cada una de las cuadriculas q permiten escoger el color.
Invitado dice:
Q tal, sabes he probado el código que muestras, lamentablemente en IE si ejecuta muy bien, pero no lo puedo ver en Firefox,por que crees que suceda esto ???
Saludos y gracias