Palheta de cores utilizando Json e Javascript não obstrutivo

Publicado por Hebert em 13/01/2007

[ Hits: 16.505 ]

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

Como ajustar o tamanho do iframe pelo tamanho da tela e mudar o target de uma página depois dela aberta

Upload de múltiplos arquivos com Javascript + Flash

Variáveis variáveis em JavaScript

Incentivando o uso do Webm, formato aberto de "codec" (conteiner) de vídeo

Editor de HTML5 em tempo real

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