Desarrollo de Paleta de Colores con JavaScript

Desarrollo de Paleta de Colores con JavaScript

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

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.

Entradas Relacionadas

No hay comentarios

You can post first response comment.

Deja un comentario

Por favor introduzca su nombre Por favor introduzca una dirección e-mail válido Por favor deje un mensaje.

¿Qué es Togirl.net?

Togirl.net es un blog que intenta acercarte entre otras cosas al mundo tecnológico de una forma divertida y atractiva.

LBM Diseño Web

LBM Diseña tu web

Frikicamiseta.es

Los mejores diseños para tus camisetas

Pin It on Pinterest