Ir para conteúdo

POWERED BY:

Arquivado

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

alicacwb

coloracao de tabela(menu)

Por , em Javascript

Recommended Posts

alicacwb    0

alicacwb
Postado

Olá galera...

 

To tentando fazer um menu, como o codigo abaixo, só que preciso de algumas funçoes pra terminar ele, só que eu nao sei fazer...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Teste do Menu</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><table width="400" border="0" align="center" cellpadding="1" cellspacing="0">  <tr align="center">    <td width="203" onclick="javascript:style.background='#F5ECE2'">menu_1</td>    <td width="203" onclick="javascript:style.background='#F5ECE2'">menu_2</td>    <td width="203" onclick="javascript:style.background='#F5ECE2'">menu_3</td>    <td width="203" onclick="javascript:style.background='#F5ECE2'">menu_4</td>    <td width="204" onclick="javascript:style.background='#F5ECE2'">menu_5</td>  </tr></table></body></html>
De acordo com esse código, qdo eh clicado na td, o script coloca uma cor de fundo.. beleza, até aí ta tudo certo... Mas eu queria que qdo o menu_1 esteja marcado com o fundo colorido, se eu clicar no menu_2 por exemplo, o fundo do menu_1 fique branco denovo, e daí o menu_2 fique colorido... ou seja, sempre vai ter um e apenas um item com o fundo colorido... tem como ??

 

Valeu

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

<html>

<head>

<title>Teste do Menu</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language=javascript>

itens = "menu_1,menu_2,menu_3,menu_4,menu_5";

cor_click = "F5ECE2";

cor_volta = "FFFFFF";

 

 

guarda_nome = "";

itens = itens.split(",");

function menu_click(nome){

  if(guarda_nome!=""){

  if(document.all){

  e = document.all[guarda_nome];

  }else{

  e = document.getElementById(guarda_nome);

  }

  e.style.background = "#"+cor_volta;

  }

  nome = nome.celula;

  if(guarda_nome!=nome){

  if(document.all){

  e = document.all[nome];

  }else{

  e = document.getElementById(nome);

  }

  e.style.background = "#"+cor_click;

  }

  guarda_nome = nome;

}

</script>

</head>

 

<body>

<table width="400" border="0" align="center" cellpadding="1" cellspacing="0"><tr align="center">

<script language=javascript>

  for(i=0;i<itens.length;i++){

  document.write("<td width=\"203\" celula=\"cel"+i+"\" id=\"cel"+i+"\" onclick=\"java script:menu_click(this,"+i+");\">"+itens+"</td>");

  }

</script>

</tr></table>

</body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

himon...

 

você sempre me salvando né !!! ;)

Pois eh tem um bug no js...

(fazendo referencia a um item) eu clico, colore, eu clico denovo, descolore, eu clico novamente e nao colore....

Tenho um código que eu consegui, vai aí em baixo pra você ver.... (esse código tbm tem o mesmo bug...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>A1 Engenharia e Gerenciamento</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" src="../js/img_rollover.js" type="text/JavaScript"></script><script language="JavaScript" src="../js/menu_layers.js" type="text/JavaScript"></script><script language="JavaScript" type="text/JavaScript">//FUNÇÕES TROCAR A CORvar cor = '#F5ECE2';var br = 'ffffff';var objnovo;var objvelho;function TrocarCor(t){if (objvelho != null){objvelho.style.background=br;}objnovo = t;if (objvelho == objnovo)	{		objnovo.style.background=br;	objvelho = null;	}else 	{	objnovo.style.background=cor;	objvelho = t;		}objvelho = t;}</script><script language="JavaScript" type="text/javascript">itens = new Array();subitens = new Array();<?php$agrupa_categoria = "";while ($linha_menu = mysql_fetch_array ($resultado_menus)) {	if (ereg ("#$linha_menu[tb_menu_nome]#", "$lista_de_menus", $regs)) {  if ($agrupa_categoria <> $linha_menu["tb_menu_id_categ"]){ 	 $count++;   	 $menus_montados = ""; 	 $agrupa_categoria = $linha_menu["tb_menu_id_categ"];?> 	 itens[<?php echo $count; ?>] = "<strong><?php echo $linha_menu[tb_categ_nome]; ?></strong>";<?php  }  $menus_montados .= "     <a href=\\\"$linha_menu[tb_menu_link]?sc=$sc\\\" target=\\\"cont\\\" class=\\\"decorlink\\\">$linha_menu[tb_menu_nome]</a>     ";		}?>	subitens[<?php echo $count; ?>] = "<?php echo $menus_montados; ?>";<?php}    ?>aux = 0;function teste(n){  if(aux==n){   e = document.all["item"+n];   e.innerHTML = "";   aux = 0; }else{  if(aux!=0){   e = document.all["item"+aux];   e.innerHTML = "";  }  aux = n;  e = document.all["item"+n];  retornar = "  ";  vetor = subitens[n].split("|");   for(i=0;i<vetor.length;i++){   retornar += "" + vetor[i] + "  ";   }  e.innerHTML = retornar; }}</script><link href="../padrao.css" rel="stylesheet" type="text/css"><body background="../images/fundo.gif" text="#000000" link="#000000" vlink="#000000" alink="#666666" leftmargin="5" topmargin="5" marginwidth="5" marginheight="5" onLoad="MM_preloadImages('../images/preview_press.gif','../images/preview_next.gif')"><table width="962" border="0" cellpadding="0" cellspacing="0" id="menu">  <tr>    <td width="129" align="left" valign="middle"><img src="../images/logo_fig_menu_intra.gif" width="114" height="69"></td>    <td width="340" align="left" valign="middle"><img src="../images/logo_tex_intra.gif" width="153" height="34"></td>    <td width="493" height="69" align="center" valign="bottom" background="../images/a1net_fundo_intra.gif"><div id="a1net" style="position:absolute; width:59px; height:8px; z-index:14; left: 723px; top: 16px;"><img src="../images/a1net.gif" width="117" height="37"></div>      <div id="data" style="position:absolute; width:98px; height:8px; z-index:14; left: 855px; top: 11px;">        <table width="100%" border="0" cellspacing="0" cellpadding="0">          <tr>            <td height="22" align="center"><strong><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><?php echo date("d/m/Y"); ?></font></strong></td>          </tr>          <tr>            <td height="18" align="center" valign="bottom"><a href="logoff.php<?php echo "?sc=$sc"; ?>" target="_top" class="mm2"><font color="#990000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Efetuar Log off</strong></font></a></td>          </tr>        </table>      </div>      <div id="boasvindas" style="position:absolute; width:241px; height:15px; z-index:2; left: 510px; top: 59px;">        <div align="left"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>          <?php switch (date("H")) {	case (date("H") >= 06) and (date("H") < 12):  print "Bom dia ";	break;	case (date("H") >= 12) and (date("H") < 18):  print "Boa tarde ";	break;	default:  print "Boa noite ";	break;}echo "$nome";?>        </strong></font></div>    </div></td>  </tr></table><table width="962" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9933">  <tr>    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="textmenu">      <tr align="center">        <td width="18"><a href="index_intra.php?<?php echo "sc=$sc"; ?>" target="cont"><img src="../images/casa.gif" width="18" height="18" border="0" align="middle"></a></td>        <td>          <table border="0" cellspacing="1" cellpadding="0" width="100%" height="20" class="textmenu">            <tr align="center">              <script language="javascript">     	 for(i=1;i<itens.length;i++){        document.write("<td bgcolor=\"#FFFFFF\" onclick=\"TrocarCor(this);teste("+i+");\"><a href=\"javascript:;\" class=\"textmenu\">"+itens[i]+"</a></td>");     	 } 	 </script>            </tr>          </table>        </td>      </tr>      <tr bgcolor="#FFFFFF">        <td width="18" bgcolor="#FFFFFF"> </td>        <td>          <table border="0" cellspacing="1" cellpadding="0" width="100%" class="textmenu">            <tr>              <td height="15" bgcolor="#FFFFFF">                <script language="javascript">     	 for(i=1;i<itens.length;i++){        document.write("<font size=\"1\"><span name=item"+i+" id=item"+i+"></span></font>");     	 }     	 </script>              </td>            </tr>          </table>        </td>      </tr>    </table></td>  </tr></table></body></html>

Valeu himon... :)

 

Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

beleza!

tb consegui resolver:

 

<html><head><title>Teste do Menu</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language=javascript>	itens = "menu_1,menu_2,menu_3,menu_4,menu_5";	cor_click = "f5ece2";	cor_volta = "ffffff";	guarda_nome = "";	itens = itens.split(",");	function menu_click(nome){  nome = nome.celula;  if(guarda_nome!="" && guarda_nome!=nome){ 	 if(document.all){ 	 e = document.all[guarda_nome]; 	 }else{ 	 e = document.getElementById(guarda_nome); 	 } 	 e.style.background = "#"+cor_volta;  }  if(document.all){  e = document.all[nome];  }else{  e = document.getElementById(nome);  }  if(e.style.background == "#"+cor_volta){  cor = "#"+cor_click;  }else{  cor = "#"+cor_volta;  }  e.style.background = cor;  guarda_nome = nome;	}</script></head><body><table width="400" border="0" align="center" cellpadding="1" cellspacing="0"><tr align="center">	<script language=javascript>  for(i=0;i<itens.length;i++){  document.write("<td width=\"203\" celula=\"cel"+i+"\" id=\"cel"+i+"\" style=\"background:'"+cor_volta+"';\" onclick=\"javascript:menu_click(this,"+i+");\">"+itens[i]+"</td>");  }	</script></tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ticarp    0

ticarp
Postado

Opa, estava precisando de um script desses!!! Legal que achei pronto aqui!!Só pra colocar um pouco mais de lenha na fogueira... hinom, teria como fazer além disso, um comando pra quando o mouse passasse por cima das opções o fundo mudasse de cor (para uma cor mais clara que quando cliacado)... então quando o usuario clicasse mudaria para uma cor mais escura...Tiago.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

é só você colocar na td algo assim.... onMouseOver="java script:style.background='#F5ECE2'" onMouseOut="java script:style.background=''"Sacou ??Alica CWB

Compartilhar este post

Link para o post
Compartilhar em outros sites

ticarp    0

ticarp
Postado

Mais uma coisa, os itens do menu quando o mouse está em cima deles o cursor não muda para o modo "hand". Teria como fazer isso,Ah Aline... onde coloco esse código?Tiago.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

você coloca dentro da td...

ex.

<table><tr><td onMouseOver="javascript:style.background='#F5ECE2';style="cursor: hand;" OnMouseOut="javascript:style.background='';style="cursor: pointer;" >none</td></tr></table>

 

Alica CWB

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