Desarrollo de Paleta de Colores con JavaScript

• Tweet

• Tweet

En ocasiones y teniendo en cuenta mi nivel de programación (que es má alto que ayer pero más bajo que el que tendré mañana) me sorprendo de lo fácil que es encontrar en la red ejemplos de código que aún no siendo difícilies, hacen cosas bastante chulas para que los que estamos empezando en este mundo tan interesante veamos el lado positivo de no entender muchas veces las cosas que leemos a la primera e intentarlo, intentarlo hasta que damos con ello.

Por eso este ejemplo de cómo realizar una paleta de colores simplemente utilizando algo de código de javascript y algo de html me ha parecido algo digno de contar y que he encontrado en esta página dedicada a desarrolladores web.

paleta de colores JavaScript

Esto es un ejemplo de una paleta de colores para que el usuario seleccione el color que prefiera directamente.

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>

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 class="textbox" 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>

Podeis ver el resultado descargando el archivo html en esta dirección. Simplemente teneis que cargarlo en vuestro navegador de esta forma podréis ver también el código de la tabla de colores.

• http://www.megaupload.com/?d=7CID095K