Ir para conteúdo

POWERED BY:

Arquivado

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

Newtinho

Paleta de Cores

Por , em Desenvolvimento frontend

Recommended Posts

Newtinho    0

Newtinho
Postado

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

William Bruno    1501

William Bruno
Postado

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

Thiago Retondar    18

Thiago Retondar
Postado

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

Thiago de Oliveira Cruz    21

Thiago de Oliveira Cruz
Postado

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

hargon    64

hargon
Postado
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

William Bruno    1501

William Bruno
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito