manipular css com javascript

Olá pessoal....

bom...

tenho a seguinte dúvida...

tenho um menu que faz troca de imagens quando o mouse passa por cima, quando clico o propriedade do css que deixa o link ativo não esta fixando a imagens quando clicado.

gostaria de saber como faço para fixar atraves do javascript??

tentei da seguinte forma

function ativa(id){

	e = document.getElementById(id);

	e.style.backgroundImage = 'url(images/icon-on.png)' ;

	e.style.backgroundRepeat = 'no-repeat';

	e.style.backgroundPosition = '3px';

	e.style.color = '#FFF';

 }

no html

---------------------------------------------------------------------------------------

serviços

 <ul class="menu">

 <li id="hr" class="menu">

 <a href="hospedagemrevenda.php" onclick="java script:ativa('hr');">hospedagem/revenda</a></li>

 <li id="criacao" class="menu">

 <a href="criacao.php" onclick="java script:ativa('criacao');">criacao</a></li>

 <li id="producao" class="menu">

 <a href="producao.php" onclick="java script:ativa('producao');">producao</a></li>

</ul>

 portfólio

<ul class="menu">

 <li id="case" class="menu">

 <a href="case.php" onclick="java script:ativa('case');">cases</a></li>

 <li id="clientes" class="menu"><a href="clientes.php" onclick="java script:ativa('clientes');">clientes</a></li>

 </ul>

porem quando carrega o pagina no fixa o imagem(url(images/icon-on.png))...

onde eu errei.....