Publicado em 7 de jul.

coloracao de tabela(menu)

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

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

hinom· 7 de jul.

<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>*

alicacwb· 7 de jul.

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

alicacwb· 7 de jul.

Caracas, consegui resolver o bug !!!Valeu himon... :) Alica CWB :)

hinom· 7 de jul.

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>

ticarp· 10 de jul.

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.

alicacwb· 10 de jul.

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

ticarp· 15 de jul.

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.

alicacwb· 15 de jul.

você coloca dentro da td...

ex.

Alica CWB