Clicar e manter imagem sem mudar ao passar o mouse em outra imagem

ola pessoal,

estou tentando fazer um mapa regional em html e javascript, estou com dúvida como fazer o seguinte:

ao passar o mouse sobre a cidade, ele deve trocar a imagem da cidade com uma outra mais clara, e ao clicar na cidade ele deve ficar com uma cor mais escura do que a imagem quando passamos o mouse.

Até ai tudo certo, mas quando eu clico ele fica com a imagem mais escura e ao passar o mouse em outra cidade ele imediatamente retira a imagem escura e volta para a imagem mais clara.

Como manter a imagem quando clico nela e ainda continuar o efeito de passar o mouse?

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

Codigo HTML

<div id="mapa"><img border="0" src="http://Caminho_da_IMAGEM_padrao_sem_cor.gif" id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map" />
<map name="Map" id="Map">

<area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();" shape="poly" coords="111,187,113,198,110,174,113,172,110,150,115,161,114,158,118,188,120,155,124,155,132,157,134,156,137,157,139,155,140,157,137" alt="cidade1l" />
 

<area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();" shape="poly" coords="41,96,191,98,147,110,198,109,153,112,157,184,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" alt="cidade2l" />

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

Codigo JAVASCRIPT

function mapa_on_1()
{

document.getElementById("mapaimag").src="http://IMAGEM_1_click.gif";
}

 

function mapa_over_1()

{

document.getElementById("mapaimag").src="http://IMAGEM_1_over.gif";
}
 

 

 

function mapa_on_2()

{

document.getElementById("mapaimag").src="http://IMAGEM_2_click.gif";
}

 

function mapa_over_2()

{

document.getElementById("mapaimag").src="http://IMAGEM_2_over.gif";
}

o código java se eu não me engano é antigo
Por favor galera, me ajuda,
Alguém pode me dar um dica de como conseguir isso. vejo em alguns códigos eles usam (style="opacity: ) mas não faço ideia se é usado duas imagens de cor deferente ou uma e nem como usar. Minha dúvia é Como manter a imagem quando clico nela e ainda continuar o efeito de passar o mouse? com opacity ou não

Obs: sou iniciante em java

Obrigado