cambia sfondo "ad ogni click"

[Buzzz]

io ho due div, uno sopra all'altro in pratica..
il div sotto compare e scompare, quando clicco il link presente nel div sopra, in pratica utilizzo questo codice:

<script language="javascript">
			function mostraNascondiMex(tuoId,tuoLink){
			var s=document.getElementById(tuoId).style;
			tuoLink.innerHTML=(s.display=='block')?'[img]img/icon/mex.png[/img]MESSAGGI':'[img]img/icon/mex.png[/img]MESSAGGI';
			s.display=(s.display=='block')?' none':'block';
			}
		</script>
    	<div id="opt_cnt_more">
        [img]img/icon/mex.png[/img]MESSAGGI
        </div>
        	<div id="opt_cnt_more_Message" style="display: none;">MESSAGE</div>

ora vi chiedo:
come faccio a far si che quando il div sotto (opt_cnt_more_Message) è aperto lo sfondo nel div sopra (opt_cnt_more) sia SFONDO1.PNG, mentre quando è chiuso sia SFONDO2.PNG

in pratica deve cambiar sfondo ad ogni click sul link del primo div.. è possibile farlo tramite css?
perchè con :hover mi cambia sfondo solo qunado ci passo sopra, ma io vorrei che lo cambiasse quando clicco.
quando clicco deve cambiar sfondo, poi riclicco e lo ricambia, in pratica non deve cambiare e ritornare quando clicco, ma un click lo cambia e un'altro click lo "ritorna"..

grazie a tutti!!