Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Newtinho

Paleta de Cores

Recommended Posts

Gente estou fazendo um site dinamico para meu Cliente, e ele quer q o plano de fundo seja dinamico, e eu prescisava de uma paleta de cores em HTML, para ele poder clicar, escolher a cor, e alterar!

alguem sabe o codigo de alguma paleta de cores? Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Solução perfeita^^ :lol:

http://www.cenasordidas.hbe.com.br/t.html

 

Browsers testados:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif IE6

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif IE7

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif IE8

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Chrome

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Safari

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif FireFox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-Type" content="text/html; charset=utf-8" />

	<title>Palheta de Cores</title>
<style type="text/css">
#palheta td {
	height: 20px;
	width: 20px;
	display: block;
	float: left;
	margin: 1px;
}
#amarelo {
	background-color: #ff0;
}
#vermelho {
	background-color: #f00;
}
#verde {
	background-color: #0f0;
}
#azul {
	background-color: #00f;
}
#azulClaro {
	background-color: #0ff;
}
#roxo {
	background-color: #f0f;
}
</style>
<script type="text/javascript">
/**
 * Código por William Bruno - Moderador iMasters  http://forum.imasters.com.br/index.php?showuser=69222
 * e hargon - Moderador iMasters  http://forum.imasters.com.br/index.php?showuser=6541
 * o 'desafio' aqui, foi relembrar que existe o método: getComputedStyle(), capaz de ler
 * css não inline =)
 */
window.onload = function(){
	var palheta = document.getElementById('palheta');
	var tds = palheta.getElementsByTagName('TD');
	
	for (var i = 0; tds.length; i++)
	{
		tds[i].onclick = function() 
		{
			if( window.getComputedStyle ) {
			  bg = document.defaultView.getComputedStyle(this, null).backgroundColor;
			} else if( palheta.currentStyle ) {
			  bg = document.getElementById(this.id).currentStyle['backgroundColor'];
			}
			document.body.style.backgroundColor = bg;
		}
	}
}

</script>

</head>
<body>
<table id="palheta">
	<tr>
		<td id="amarelo"></td>
		<td id="vermelho"></td>
		<td id="verde"></td>
	</tr>
	<tr>
		<td id="azul"></td>
		<td id="azulClaro"></td>
		<td id="roxo"></td>
	</tr>
</table>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito bom, William. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Agora Newtinho tem duas opções. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem tbm essa solução aqui :)

 

<html>
<head>
<style type="text/css">
#amarelo, #vermelho, #verde, 
#azul, #azulClaro, #roxo {
	background-color: #ff0;
	height: 20px;
	width: 20px;
	display: block;
	float: left;
}
#vermelho {
	background-color: #f00;
}
#verde {
	background-color: #0f0;
}
#azul {
	background-color: #00f;
}
#azulClaro {
	background-color: #0ff;
}
#roxo {
	background-color: #f0f;
}
</style>
<script type="text/javascript">
function changeStyle(str)
{
document.body.style.backgroundColor="#"+str;
}

</script>
</head>
<body>
<table id="palheta">
	<tr>
		<td id="amarelo" onClick="changeStyle('ff0')"></td>
		<td id="vermelho" onClick="changeStyle('f00')"></td>
		<td id="verde" onClick="changeStyle('0f0')"></td>

	</tr>
	<tr>
		<td id="azul" onClick="changeStyle('00f')"></td>
		<td id="azulClaro" onClick="changeStyle('0ff')"></td>
		<td id="roxo" onClick="changeStyle('f0f')"></td>
	</tr>
</table>
</body>
</html>

Só que a minha solução não é la uma das melhores...

 

Mas como para a mesma coisa existem milhares de formas...

Viva o javaScript....

 

Veja se da proxima vez posta por lá :)

Que certeza que a galera sabe isso de cór rs

 

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites
Faltou parte dos meus créditos aí. rs

 

Minha segunda solução foi perfeita também hein!? Mas reconheço que essa aí escreveu menos. Parabéns! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

hehe.. bora editar então hargon ! :lol:

Mas que ficou lindo, ficou !! ^^

 

Poxa berseck, tá ai pra exemplo, mas fica mais bonito não misturar HTML com JS.. =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.