Ir para conteúdo

POWERED BY:

Arquivado

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

Martinsrj

[Resolvido] Capturar a cor que o usuario clicou.

Por , em Javascript

Recommended Posts

Martinsrj    0

Martinsrj
Postado

Olá pessoal, boa noite!

Preciso de um script quando o usuario clicar em uma determinada cor eu possa capturar a cor em Hexa e assim através da linguagem ASP inserir a mesma no banco.

Exemplo:

Tenho uma tabela (duas linhas e três colunas) com as seguintes cores:

Vermelho Azul Amarelo

Branco Verde Cinza

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá uma olhada:

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

 

Basta em vez de jogar a cor no background como eu fiz, mandar para um input..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Martinsrj    0

Martinsrj
Postado

Bom dia William!

Estou com dificuldade em inserir no input a cor que o usuario escolheu.

A ideia que você passou no link é essa mesma, porem quero que o usuario ao clicar em uma cor o campo imput receba com valores em hexa.

 

Abraços.

 

Dá uma olhada:

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

 

Basta em vez de jogar a cor no background como eu fiz, mandar para um input..

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Como você tentou fazer?

<!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"> 
window.onload = function(){
	var palheta = document.getElementById('palheta');
	var tds = palheta.getElementsByTagName('TD');
	
	for (var i = 0; tds.length; i++)
	{
		tds[i].onmouseover = function() 
		{
			if( window.getComputedStyle ) {
			  bg = document.defaultView.getComputedStyle(this, null).backgroundColor;
			} else if( palheta.currentStyle ) {
			  bg = document.getElementById(this.id).currentStyle['backgroundColor'];
			}
			document.getElementById('cor').value = bg;
			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>
<input type="text" name="cor" id="cor" />
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Martinsrj    0

Martinsrj
Postado

Bom dia pessoal!

Com muito custo conseguir fazer exatamente o que queria.

Veja a imagem abaixo, onde o usuario clica no quadradinho da cor e assim abre uma janela dinamicamente com várias cores:

Imagem Postada

 

Sem mais,

 

Paulo Martins.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito