Palheta de cores utilizando Json e Javascript não obstrutivo

Publicado por Hebert em 13/01/2007

[ Hits: 16.470 ]

Blog: http://www.hebertphp.net

0 0

Denuncie Favoritos Indicar Impressora

Palheta de cores utilizando Json e Javascript não obstrutivo

Esta dica mostra como montar uma palheta de cores utilizando novas práticas de programação em Javascript:

Json: um formato leve para intercâmbio de dados computacionais que equivale a um XML de forma simplificada. Outras informações pode ser lidas no Json na wikipedia. Também estou preparando um artigo sobre Json.

Javascript não obstrutivo: prática de programação onde os eventos javascript são criados e executados fora do HTML.

A escolha das palhetas de cores foi baseado no artigo sobre um estudo de caso para a HP, o qual pode ser lido no link abaixo:

Abstracting Colors for Hewlett-Packard Company

Abaixo segue o código:

<html>
<head>
<title>Json cor</title>
</head>
<style>
.divs{
  border:1px solid black;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 5px;
}
</style>
<script>
var json={
  'grey01':['e6e6e6', 'cccccc', '666666'],
  'blue01':['66ccff', '3399cc', '006699'],
  'blue02':['99ccff', '6699cc', '336699'],
  'green01':['99cccc','669999', '336666'],
  'green02':['cccc99','999966', '666633'],
  'brown01':['ffcc99','cc9966', '996633'],
  'brown02':['ffcc66', 'cc9933', '996600'],
  'orange01':['ffcc66','ff9900', 'ff6600'],
  'orange02':['ff9966','cc6633', '993300'],
  'red01':[   'ff9999','cc6633', 'cc3333'],
  'red02':[   'ffcccc','cc9999', '996666']
};//criação da variável tipo json
window.onload=function(){
//aqui um exemplo de javascript não obstrutivo, evento onload fora do HTML
if(document.getElementById){
   document.getElementById('s1').onchange=function(){
   //o evento onchange também é executado fora do HTML
      es_cor(this[this.selectedIndex].value);
   }
preenche();
}
}//onload
function preenche(){
ss1=document.getElementById('s1');
for(i in json){
   opt = document.createElement("OPTION");
   opt.innerHTML = i;
   opt.value = i;
   ss1.appendChild(opt);
}
}//preenche()
function es_cor(c){
if(c==""){
   for(i=1;i<4;i++){
     document.getElementById('d'+i).style.backgroundColor='white';
     document.getElementById('d'+i).innerHTML=' white';
   }
   return false;
}
var cor=json[c];
var j=0;
for(ii in cor){
   document.getElementById('d'+(j+1)).style.backgroundColor=cor[ii];
   document.getElementById('d'+(j+1)).innerHTML=' #'+cor[ii];
   j++;
}
}//es_cor
</script>
<body>
Selecione um padrão de cor<select id="s1" >
<option value="">selecione</option>
</select><br>
<div class="divs" id="d1">
white
</div>
<div class="divs" id="d2">
white
</div>
<div class="divs" id="d3">
white
</div>
</body>
</html>

Espero que gostem e aguardo os comentários ou eventuais dúvidas sobre o código.

Abraços, Hebert

Abaixo o resultado do código:

Selecione um padrão de cor

white

Outras dicas deste autor

Nenhuma dica encontrada.

Leitura recomendada

Criando variáveis dinamicamente com Javascript

Resolvendo erro de atualização do firmware do modem DSL2640t

Copiando imagens bloqueadas

Slide de imagens em jQuery

Programação orientada à objetos em JavaScript

Comentários

[1] Comentário enviado por Teixeira em 02/09/2007 - 15:08h

Parabéns pela dica!
Tenho notado que a formação de cores não é exatamente linear, ou seja, se aumentarmos (entre 00 a ff) o valor do vermelho por exemplo, não obteremos necessariamente um vermelho mais forte, pois às vezes a cor resultante fica totalmente diferente.
Notei que na dica ficaram faltando, por exemplo, os tons de amarelo.
Existe alguma forma prática de conseguir todos os tons a partir de uma cor?
[]'s

0 0