Javascript: Colorpicker

colorpicker.jpg

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag <script> e depois criar uma nova variável do tipo Colorpicker().

Ex:

...

<script type="text/javascript" src="colorpicker.js"></script>

...

var meuCP = new ColorPicker(100, 38); // x , y

meuCP.setVisible(true);

...

Para visualizar-lo funcionando clique aqui.

2 thoughts on “Javascript: Colorpicker

  1. Guilherme Tavares

    Há pouco tempo criei um dispositivo parecido, mas que na verdade é um colorMixer.

    Ele mostra três barras com vários tons de R, G e B (do #000 ao #fff). Selecionando um tom de cada cor, você faz uma mistura que resulta na cor final. O dado é passado direto ao campo de um formulário.

    Se tiver interesse em vê-lo me mande um e-mail que eu te envio os codigos.

    Responder
  2. Evandro

    Muito bom

    Parabéns pelo trabalho, vou utilizá-lo em meu site.

    Ah, uma coisa: Você esqueceu de postar o link de download. Baixe ele pelo exemplo, mas parabéns!

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s