Micaela 9 de agosto de 2008 a las 09.30
   Imprimir artículo
elWebmaster.com

Paleta de colores interactiva mediante una librería Javascript


Hace un tiempo tuve un problema importante, estaba diseñando un sitio que permitía generar gráficos y, previamente, el usuario debía seleccionar los colores a usar. En este punto fracasaba. Mis opciones eran hacerle colocar el valor hexadecimal o RGB del color al visitante, o darle algunas pocas opciones como ser rojo, azul y demás, acotando muchísimo la posibilidad de elección.

La solución a este inconveniente la terminé encontrando en DhtmlGoodies. Color Picker es una librería JavaScript que nos permite transformar simples campos de texto de un formulario en potentes selectores de colores.

Una vez implementado el script cuando el usuario seleccione para llenar el campo en cuestión le aparecerá un cuadro de colores, donde con unos pocos clics podrá elegir entre más de 16 millones de variantes.

Otro dato interesante es que luego le aparecerá el input con un fondo del color que haya elegido, para fijarse si no se equivocó. A nosotros sencillamente nos entregará el valor del color en hexadecimal para que utilicemos en lo que necesitemos.

Usar Color Picker en nuestros formularios es sumamente simple.

Primero debemos descargar la librería desde aquí, descomprimir el archivo zip y subirlo a nuestro sitio. Les sugiero cambiar la imagen close.jpg, dentro de la carpeta images, por otra similar pero que tenga el texto en castellano.

Luego de esto sólo debemos enlazar el script a nuestra página poniendo el siguiente código dentro del head:

<script type="text/javascript" language="javascript" src="js/colorPicker.js"></script>
<link rel="stylesheet" href="css/colorPicker.css" type="text/css"></link>

Por último, sencillamente debemos agregar lo siguiente en los campos que deseemos que Color Picker funcione:

onclick="startColorPicker(this)" onkeyup="maskedHex(this)"

Por ejemplo:

<input type="text" id="bau" onclick="startColorPicker(this)" onkeyup="maskedHex(this)">

Y con esto ya estará terminado y habremos resuelto nuestro problema de forma fácil, elegante y funcional.

Fuente: DHTML Goodies


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (16)

  1. Elizabeth del C. López Guillén dice:

    Es muy interesante este tema, por que hace mas facil aplicar cierta tonalidad de colores en el desarrollo de un sitios wed, lo cual implica una asistencia grafica al desarrollador.

  2. Rodrigo dice:

    Super! me funciono

  3. Otto Marin dice:

    Hola, como podria cerrar al hacer click fuera de la paleta??

  4. Otto Marin dice:

    muy buena paleta pero me estoy matando tratando de cerrar eso

  5. Alfredo Gallinger dice:

    Excelente!!!!!!!!!!!!!!!!!!! Felicitaciones.

  6. josep dice:

    Buenísimo y facilísimo de implementar.

    Tal como está hecho sólo funciona al hacer clic en el campo. Si queréis añadir un botón (tipo paleta de colores):
    onclick=”startColorPicker(document.nombreformulario.nombrecampo)” (en el botón o imagen)
    en lugar del onclick=”startColorPicker(this)” original.

  7. Juan de Jesus Uribe dice:

    Excelente tanto el producto como las instrucciones.

    Esto funciona. Gracias

  8. julian velazquez zapata dice:

    exelente

    nos vemos en el futuro…!

  9. julian velazquez zapata dice:

    exelente

    me fue de gran utilidad

    nos vemos en el futuro…!

  10. Neder dice:

    pongo el codigo pero en vez de aparecerme al lado del campo me aparece abajo del todo y ademas no me deja bajar las flechitas ni la cruz para elegir el color. Espero qe me puedan ayudar lo antes posible

  11. marko ººº dice:

    muy buen aporte—- me sirvio mucho.. gracias!!

  12. maria dice:

    hola a mi me pasa lo mismo que neder, alguien tiene una solucion no me deja seleccionar el color correctamente, muchas gracias

  13. Marco dice:

    me pasa lo mismo que a maria y a neder :S ayuda!!!

  14. thony dice:

    muy bueno!!, solo que me sucedio lo mismo que maria, neder, marco al abrirlo con el googel chrome no funciono correctamente, pero al parecer en firefox, opera, explorer si funciona lo probe y esta al 100% xD saludos!

  15. Jordi dice:

    Tengo un pequeño problema. Al hacer click sobre el text me sale el recuadro de los colores pero sin ninguna imagen solo los recuadros de x como si no encontrara las imagenes. He mirado y todo esta bien dirigido no se que puede estar pasando.
    Alguien me puede ayudar?
    Muchas gracias.

  16. victor dice:

    bien funciona, gracias, ahora una dudita tengo el color seleccionado en la paleta de colores en el input, como le digo a una capa que coja ese color de fondo, me podeis ayudar? gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder