Trocar imagem ao clique - JavaScript

[maiconherverton]

Pessoal, estou com um menu cinza no meu sistema web, e quando o usuário passa o mouse o botão fica colorido, eu gostaria de fazer pra quando o usuário clicasse o botão permanecesse colorido, e quando clicasse em outro botão, o anterior ficasse cinza e o clicado colorido e assim por diante, desde já agradeço.

[netofire]

Existem muitas funções pra isso, posta seu código do menu que fica mais fácil te ajudar.

[maiconherverton]

<a href="#"><img src="icons/inicio.png" alt="INÍCIO" border="0" onmouseover="this.src='icons/inicio2.png'" onmouseout="this.src='icons/inicio.png'" href="#" onclick="fazerREQUEST('paginas/bem-vindo.html','hw'); return false;"/></a></td>
       <td width="93"><a href="#"><img src="icons/cadprodutos.png" alt="CADASTRAR, CONSULTAR, EDITAR, EXCLUIR" border="0" onMouseOver="this.src='icons/cadprodutos2.png'" onMouseOut="this.src='icons/cadprodutos.png'" href="#" onclick="fazerREQUEST('paginas/ingredientes.html','hw'); return false;"/></a></td>
       <td width="95"><a href="#"><img src="icons/preparacoes.png" alt="CADASTRAR, CONSULTAR, EDITAR, EXCLUIR" border="0" onmouseover="this.src='icons/preparacoes2.png'" onmouseout="this.src='icons/preparacoes.png'" href="#" onclick="fazerREQUEST('paginas/preparacoes.html','hw'); return false;"/></a></td>
       <td width="90"><a href="#"><img src="icons/cardapio.png" alt="CADASTRAR, CONSULTAR, EDITAR, EXCLUIR" border="0" onmouseover="this.src='icons/cardapio2.png'" onmouseout="this.src='icons/cardapio.png'" href="#" onclick="fazerREQUEST('paginas/cardapio.html','hw'); return false;"/></a></td>
       <td width="90"><a href="#"><img src="icons/municipio.png" alt="CADASTRAR, CONSULTAR, EDITAR, EXCLUIR" border="0" onmouseover="this.src='icons/municipio2.png'" onmouseout="this.src='icons/municipio.png'" href="#" onclick="fazerREQUEST('paginas/municipio.html','hw'); return false;"/></a></td>
       <td width="103"><a href="#"><img src="icons/undescolar.png" alt="CADASTRAR, CONSULTAR, EDITAR, EXCLUIR" border="0" onmouseover="this.src='icons/undescolar2.png'" onmouseout="this.src='icons/undescolar.png'" href="#" onclick="fazerREQUEST('paginas/undescolar.html','hw'); return false;"/></a>

O menu é esse aí, tipo essa função fazerREQUEST é só pra quando ele clicar na imagem chamar a página correspondente dentro de uma DIV (AJAX) mas isso não importa, o que eu gostaria de saber é como clica e a imagem (Ex.: inicio.png ficar inicio2.png e quando eu clicasse em outra undescolar.png, inicio2.png fosse substituida por inicio.png e undescolar.png por undescolar2.png

Essa imagem acima mostra quando passo o mouse sobre ingrediente, gostaria que ficasse assim também quando clicasse, e saísse quando clicasse em outro como citei acima. Obrigado.

[marcusnunes]

Tente algo do tipo:

<script language="javascript">
function Poster(n){
document.[B]foto[/B].src = "http://site.com/"+n;
</script>


<img src="http://site.com/142.jpg" [B]name="foto"[/B] width="100" />


<a href="javascript:Poster('teste.jpg');">Mudar</a>