backgroundColor funciona mas color nao

Satinka · Dezembro 1, 2008

Ola,

estou fazendo meus primeiros testes usando JS em uma tabela.

Mais especificamente, estou tentando mudar a cor da fonte (...style.color="...) dos dados de uma coluna inteira ao passar com o mouse sobre uma das células.

Nao está funcionando. Se no entanto eu tentar mudar a cor do background (...style.backgroundColor="...) da coluna, ao inves da cor da fonte, aí tudo bem.

Coloquei esta funçao no header:

<script type="text/javascript"> 
function dest(ele,col)
{
	document.getElementById("coluna"+col).style.backgroundColor="#CCCCFF";
}
</script>

e isto na tabela:

<table id="servtab" summary="Tabela comparativa : blocos e tijolos">  
			<col id="coluna01"> </col>
			<col id="coluna02"> </col> 
			<col id="coluna03"> </col> 
			<col id="coluna04"> </col> 
			<col id="coluna05"> </col> 
			<col id="coluna06"> </col> 
			<col id="coluna07"> </col> 
			<thead>  
				<tr>
					<th scope="col" class="tabimg"></th>  
					<th scope="col" class="tabheader">Revestimento</th>  
					<th scope="col" class="tabheader">Conforto térmico, <br /> Conforto acústico</th>  
					<th scope="col" class="tabheader">Rapidez / <br /> Agilidade</th>  
					<th scope="col" class="tabheader">Desperdício*</th>  
					<th scope="col" class="tabheader">Custo unitário</th>  
					<th scope="col" class="tabheader">Proteção <br /> de tubos</th>  
				</tr>  
			</thead>  
			<tbody>  
				<tr>  
					<td class="tabimg" id="bloco1" onmouseover="dest(this,'01')"></td> 
					<td class="firstodd" onmouseover="dest(this,'02')">Sim</td> 
					<td class="odd" onmouseover="dest(this,'03')">Não</td> 
					<td class="odd" onmouseover="dest(this,'04')"> Sim**</td> 
					<td class="odd" onmouseover="dest(this,'05')">Alto</td> 
					<td class="odd" onmouseover="dest(this,'06')">Baixo</td> 
					<td class="lastodd" onmouseover="dest(this,'07')">Não</td> 
				</tr>

etcetera.

A cor original da fonte está definida dentro do ID da tabela, #servtab, em arquivo css externo.

Alguem pode me dar uma luz?

webflex · Dezembro 1, 2008

Olá,

Seria possível ver o código on-line?

Cumprimentos,

webflex

webflex · Dezembro 1, 2008

Olá,

Pedi online porque experimentei o seu trecho que enviou e não mudou mesmo nada, nem com backgroundColor nem color...

Cumprimentos,

webflex

Satinka · Dezembro 2, 2008

Aqui está o link:

http://www.lliriadesigners.com.br/jstests/test_JS_tab.html

nao vai reparar nas cores rsss

Por enquanto o efeito do onmouseover permanece, vou testando uma coisa de cada vez.

vlw

Carutcho · Dezembro 2, 2008

Grannnde Satinka, vê se é isso aqui que você quer ?

Maneiro o modo que você fez essa tabela hein, nunca fiz desse jeito, é recomendação da w3c ? tipo seguindo web semântica? eu sempre vi do modo basicão usando apenas th, td, tr.

Abssssss

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META NAME="description" CONTENT="Quando o assunto é planejar, construir, reformar e administrar a Techniek é uma escolha inteligente.  Concepção e desenvolvimento do seu projeto exclusivo, em acordo ao seu estilo e qualidade de vida.">
<META NAME="keywords" CONTENT="construcao, planejamento, construir, reformar, recuperacao,
projeto, obra, casa, residencia, predio, imovel, 
construtora, engenharia, gerenciamento de obras, 
projeto residencial,  reforma residencial,
construcao residencial, construcao industrial, construcao comercial, 
sao paulo">
<META NAME="author" CONTENT="YSATIS - Wladia Viviani">
<META name="Contributors" CONTENT="Wladia Viviani" / >
<title>.: Techniek :. tabela comparativa : blocos e tijolos </title>

		<style type="text/css">
			@import "css/comum.css";
			@import "css/test_JS_servicos.css";
		</style>
<script type="text/javascript"> 
function dest(ele,col)
{
	document.getElementById("coluna"+col).style.backgroundColor="#CCCCFF";
	ele.style.color="#00cc00";
}
function normal(ele,col)
{
	document.getElementById("coluna"+col).style.backgroundColor="#FFF";
	ele.style.color="#808080";
}

</script>


</head>

<body>
 <div id="pagina"> 
	<div id="tela"> 
		<table id="servtab" summary="Tabela comparativa : blocos e tijolos">  
			<col id="coluna01"> </col>
			<col id="coluna02"> </col> 
			<col id="coluna03"> </col> 
			<col id="coluna04"> </col> 
			<col id="coluna05"> </col> 
			<col id="coluna06"> </col> 
			<col id="coluna07"> </col> 
			<thead>  
				<tr>

					<th scope="col" class="tabimg"></th>  
					<th scope="col" class="tabheader">Revestimento</th>  
					<th scope="col" class="tabheader">Conforto térmico, <br /> Conforto acústico</th>  
					<th scope="col" class="tabheader">Rapidez / <br /> Agilidade</th>  
					<th scope="col" class="tabheader">Desperdício*</th>  
					<th scope="col" class="tabheader">Custo unitário</th>  
					<th scope="col" class="tabheader">Proteção <br /> de tubos</th>  
				</tr>  
			</thead>  
			<tbody>  
				<tr>  
					<td class="tabimg" id="bloco1" onmouseout="normal(this,'01')" onmouseover="dest(this,'01')"></td> 
					<td class="firstodd" onmouseout="normal(this,'02')" onmouseover="dest(this,'02')">Sim</td> 
					<td class="odd" onmouseout="normal(this,'03')" onmouseover="dest(this,'03')">Não</td> 
					<td class="odd" onmouseout="normal(this,'04')" onmouseover="dest(this,'04')"> Sim**</td> 
					<td class="odd" onmouseout="normal(this,'05')" onmouseover="dest(this,'05')">Alto</td> 
					<td class="odd" onmouseout="normal(this,'06')" onmouseover="dest(this,'06')">Baixo</td> 
					<td class="lastodd" onmouseout="normal(this,'07')" onmouseover="dest(this,'07')">Não</td> 
				</tr>  
				<tr>  
					<td class="tabimg" id="bloco2"></td> 
					<td class="tabcell">Sim</td> 
					<td class="tabcell">Não</td> 
					<td class="tabcell">Sim</td> 
					<td class="tabcell">Baixo</td> 
					<td class="tabcell">Baixo</td> 
					<td class="tabcell">Sim</td> 
				</tr>  
				<tr>  
					<td class="tabimg" id="bloco3"></td> 
					<td class="firstodd">Opcional</td> 
					<td class="odd">Sim</td> 
					<td class="odd">Sim</td> 
					<td class="odd">Baixo</td> 
					<td class="odd">Alto</td> 
					<td class="lastodd">Sim</td> 
				</tr>  
				<tr>  
					<td class="tabimg" id="bloco4"></td> 
					<td class="tabcell">Opcional</td> 
					<td class="tabcell">Sim</td> 
					<td class="tabcell">Sim</td> 
					<td class="tabcell">Mínimo</td> 
					<td class="tabcell">Médio</td> 
					<td class="tabcell, last">Sim</td> 
				</tr>  
			</tbody>  
		</table>  
		<p class="foot">

			*  No processo construtivo de uma forma geral, desde utilização de
			materiais que poderiam ser substituídos ou dispensados, tais como tábuas e 
			estruturas de madeira, barras de aço, entre outros.
		</p>
		<div class="voltar" id="ontop">
			<a id="volta" href="servicos.php?opt=pc">Voltar</a>
		</div>		
		<p class="foot">
			** Rapidez e agilidade na aplicação do material, não no processo completo, 
			que depende da confecção de colunas e pilares de sustentação.
		</p>
	</div>

</div> 
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
	var pageTracker = _gat._getTracker("UA-5367584-1"); 
	pageTracker._trackPageview();
</script>
</body>
</html>

Satinka · Dezembro 2, 2008

Nao era bem esse o problema, quer dizer voltar ao estado normal, mas valeu mesmo assim porque ia ter de faze-lo uma hora ou outra :)

O problema é que nao estou conseguindo modificar a cor da letra da coluna inteira, ao passar com o mouse sobre uma de suas celulas. Em suma, fazer um "highlight column" (putz fosse com linha bastaria depinir o tr:hover no css, mas é pedido de cliente, fazer o que)

Quer dizer, consigo modificar o background da coluna (você viu, ficou lilas) mas nao a cor da letra. Nao deveria ser suficiente substituir a linha:

document.getElementById("coluna"+col).style.backgroundColor="#CCCCFF";

pela linha:

document.getElementById("coluna"+col).style.color="#CCCCFF";

??? Pois... se eu tentar fazer isso, só muda a cor da letra de uma celula (aquela apontada pelo mouse).

--------

Sim, segui as recomendaçoes do W3C para a tabela, estou assumindo meu lado Monk rssss. Mas ainda nao posso seguir as recomendaçoes à risca, por causa do maldito IE6.

Abç!

Carutcho · Dezembro 3, 2008

Satinka

Desculpe :(, essa parte foge dos meus conhecimentos, nunca trabalhei desse modo, cheguei a fazer testes aqui mas naum consegui achar uma resposta.

:( fico te devendo essa :(, mas acredito que alguém consiga te ajudar com isso e posso dar uma dica onde achar, quem pode te ajudar com isso é a galera da área de CSS.

Ahh aqui no forum tem um usuário chamado "majour" ele é mt famoso nessa área e conhece MUUITO de CSS e javascript tem até um site dedicado a isso que é referência para mt gente, tenta entrar em contato com ele.

Falo isso pq o teste que fiz aqui, eu tirei todas as classes e estilos do HTML e tentei aplicar pelo col, setando um "style:color:#000" para mudar a cor da fonte e ele não mudou, só consigo quando aplico direto no TD. Por isso acho que a linha pra você conseguir é descobrir com CSS como se coloca a cor da letra diferente para a coluna inteira e depois você aplica a mesma forma só que em javascript.

Espero ter te ajudado.

Abssss

Satinka · Dezembro 3, 2008

Ola Carutcho,

obrigada por ter testado, valeu mesmo.

Em CSS eu ate saberia como fazer, mas é algo tao "forçado" que por isso pensei em tentar direto com js, afinal a degradaçao é aceitavel.

Vou seguir teu conselho e tentar falar com o Maujor. Conheço o site dele, nossa aprendi tanta coisa la... nao sabia que ele manjava de JS tb.

Como faço para entrar em contato com ele aqui pelo forum?

Abç!

Carutcho · Dezembro 4, 2008

O majour vira e meche posta aqui no forum,

qualquer coisa tenta mandar uma MP pra ele :D

abssss

Arquivado

backgroundColor funciona mas color nao

Recommended Posts

Satinka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Satinka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Satinka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Satinka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante