Daniel André Paz

para ser bem sincero sou novo no JS minha ideia é a seguinte, já vi que tem como fazer if(index.html = windows.location alguma coisa index.html) então troca background da id Botao 1 para botao1_hover.png varios ifs verificando, para deixar o link ativo a ideia é o JS pegar a pagina que esta, e fazer as comparações, verificando qual id vai ser trocado o background agradeço desde já segue abaixo o código HTML <ul id="alinha-menu"> <li><a href="index.php?option=com_content&view=article&id=46&Itemid=53" id="menu1" alt="MR Consultoria"><h5>MR Consultoria</h5></a> <li><a href="index.php?option=com_content&view=article&id=47&Itemid=54" id="menu2" alt="MR Acessoria Empresarial"><h5>MR Acessoria Empresarial</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=52&Itemid=57" id="menu3" alt="MR Acessoria em Cobranças"><h5>MR Acessoria em Cobranças</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=48&Itemid=55" id="menu4" alt="MR Acessoria Juridica"><h5>MR Acessoria Juridica</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=49&Itemid=56" id="menu5" alt="MR Segurança"><h5>MR Segurança</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=53&Itemid=58" id="menu6" alt="MR Telefonia"><h5>MR Telefonia</h5></a></li> </ul> e o CSS #menu { float:left; } #menu1 { width:146px; height:40px; background:url(../images/botoes/menu_consultoria.png) no-repeat; list-style:none; display:block; } #menu1:hover { width:146px; height:40px; background:url(../images/botoes/menu_consultoria_hover.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu1 h5 { visibility:hidden; width:146px; height:40px; display:block; overflow: hidden; font-size:24px; position: fixed; top: 203px; } #menu2 { width:139px; height:40px; background:url(../images/botoes/menu_acessoria.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu2:hover { width:139px; height:40px; background:url(../images/botoes/menu_acessoria_hover.png) no-repeat; list-style:none; display:block; } #menu2:active { width:139px; height:40px; background:url(../images/botoes/menu_acessoria_hover.png) no-repeat; list-style:none; display:block; } #menu2 h5 { visibility:hidden; width:139px; height:40px; display:block; } #menu3 { width:155px; height:40px; background:url(../images/botoes/menu_cobrancas.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu3:hover { width:155px; height:40px; background:url(../images/botoes/menu_cobrancas_hover.png) no-repeat; list-style:none; display:block; } #menu3 h5 { visibility:hidden; width:155px; height:40px; display:block; } #menu4 { width:142px; height:40px; background:url(../images/botoes/menu_juridica.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu4:hover { width:142px; height:40px; background:url(../images/botoes/menu_juridica_hover.png) no-repeat; list-style:none; display:block; } #menu4 h5 { visibility:hidden; width:142px; height:40px; display:block; } #menu5 { width:139px; height:40px; background:url(../images/botoes/menu_seguranca.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu5:hover { width:139px; height:40px; background:url(../images/botoes/menu_seguranca_hover.png) no-repeat; list-style:none; display:block; } #menu5 h5 { visibility:hidden; width:139px; height:40px; display:block; } #menu6 { width:131px; height:40px; background:url(../images/botoes/menu_telefonia.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu6:hover { width:131px; height:40px; background:url(../images/botoes/menu_telefonia_hover.png) no-repeat; list-style:none; display:block; } #menu6 h5 { visibility:hidden; width:131px; height:40px; display:block; } #alinha-menu { width:1000px; margin:auto; height:40px; margin-top:26px; padding-left:50px; margin-bottom:35px; } #alinha-menu li { float:left; margin-left:10px; list-style:none; } Agradeço desde já pela ajuda, não quero o código pronto simplesmente, quero entender o código e ver como funciona, pois não estou aqui para explorar o trabalho de ninguém e sim para compartilhar conhecimento, entendo bastante de CMS, Lojas Virtuais, e Hacks CSS agradeço desde já Pela AJuda novamente Att. Daniel Paz

MENU HTML <ul id="alinha-menu"> <li><a href="index.php?option=com_content&view=article&id=46&Itemid=53" id="menu1" alt="MR Consultoria"><h5>MR Consultoria</h5></a> <li><a href="index.php?option=com_content&view=article&id=47&Itemid=54" id="menu2" alt="MR Acessoria Empresarial"><h5>MR Acessoria Empresarial</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=52&Itemid=57" id="menu3" alt="MR Acessoria em Cobranças"><h5>MR Acessoria em Cobranças</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=48&Itemid=55" id="menu4" alt="MR Acessoria Juridica"><h5>MR Acessoria Juridica</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=49&Itemid=56" id="menu5" alt="MR Segurança"><h5>MR Segurança</h5></a></li> <li><a href="index.php?option=com_content&view=article&id=53&Itemid=58" id="menu6" alt="MR Telefonia"><h5>MR Telefonia</h5></a></li> </ul> MENU EM CSS #menu { float:left; } #menu1 { width:146px; height:40px; background:url(../images/botoes/menu_consultoria.png) no-repeat; list-style:none; display:block; } #menu1:hover { width:146px; height:40px; background:url(../images/botoes/menu_consultoria_hover.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu1 h5 { visibility:hidden; width:146px; height:40px; display:block; overflow: hidden; font-size:24px; position: fixed; top: 203px; } #menu2 { width:139px; height:40px; background:url(../images/botoes/menu_acessoria.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu2:hover { width:139px; height:40px; background:url(../images/botoes/menu_acessoria_hover.png) no-repeat; list-style:none; display:block; } #menu2:active { width:139px; height:40px; background:url(../images/botoes/menu_acessoria_hover.png) no-repeat; list-style:none; display:block; } #menu2 h5 { visibility:hidden; width:139px; height:40px; display:block; } #menu3 { width:155px; height:40px; background:url(../images/botoes/menu_cobrancas.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu3:hover { width:155px; height:40px; background:url(../images/botoes/menu_cobrancas_hover.png) no-repeat; list-style:none; display:block; } #menu3 h5 { visibility:hidden; width:155px; height:40px; display:block; } #menu4 { width:142px; height:40px; background:url(../images/botoes/menu_juridica.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu4:hover { width:142px; height:40px; background:url(../images/botoes/menu_juridica_hover.png) no-repeat; list-style:none; display:block; } #menu4 h5 { visibility:hidden; width:142px; height:40px; display:block; } #menu5 { width:139px; height:40px; background:url(../images/botoes/menu_seguranca.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu5:hover { width:139px; height:40px; background:url(../images/botoes/menu_seguranca_hover.png) no-repeat; list-style:none; display:block; } #menu5 h5 { visibility:hidden; width:139px; height:40px; display:block; } #menu6 { width:131px; height:40px; background:url(../images/botoes/menu_telefonia.png) no-repeat; list-style:none; display:block; overflow: hidden; } #menu6:hover { width:131px; height:40px; background:url(../images/botoes/menu_telefonia_hover.png) no-repeat; list-style:none; display:block; } #menu6 h5 { visibility:hidden; width:131px; height:40px; display:block; } #alinha-menu { width:1000px; margin:auto; height:40px; margin-top:26px; padding-left:50px; margin-bottom:35px; } #alinha-menu li { float:left; margin-left:10px; list-style:none; }[/codebox] sei que não é bom utilizar imagens como menu, mas nesse caso é a unica maneira, utilzei css image replace para esconder os links. agradeço desde já pela ajuda endereço do site: www.grupomrbrasil.com.br como eu quero que fique quando esta ativo = http://www.vintepropaganda.com.br/site_mr_teste/inicial.html reparem que o MR Consultoria esta ativo quero que quando clique no link fique ativo como esta ali. mas não funciona, já tentei de diversas maneiras sou novo no forum, agradeço desde já pela ajuda.