Código JS para Trocar Background de Acordo com a Pagina

[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