Função Trocar Imagem

http://www.linhadecomando.com/javascript/javascript-destacar-item-do-menu-ao-clicar-cor-de-fundo

by Gilmar Oliveira

HTML

<script>
  function AdicionaSelect() {
    var i = document.form.select.selectedIndex;
    var j = document.form2.txtarea.value;
    j += document.form.select[i].value;
    document.form2.txtarea.value = j+"\n" ;
  }
  function Twitter(tag) {
    var tag_li = document.getElementById('japamala');
    var tag_a = tag_li.getElementsByTagName('a');
    for (i = 0; i < tag_a.length; i++)
    tag.style.backgroundImage = "url(http://gilmardesigner.com/Imagens/social/twitter.png)"; // altera o fundo
  }
	function trocaImagem(tag) {
		var tag_li = document.getElementById('MenuContas');
  	var tag_a = tag_li.getElementsByTagName('option');
  	i = tag_a.value; {
    //tag_a[i].style.backgroundImage = "i";
  	}
  	tag.style.backgroundImage = "url(http://gilmardesigner.com/Imagens/social/"+i+")"; // altera o fundo
	}
  function Troca2(tag) {
    var i = document.form.select.selectedIndex;
    var j = document.japamala.value;
    j += document.form.select[i].value;
    tag.style.backgroundImage = i ; {
  	}
  	tag.style.backgroundImage = "url("+imagem+")"; // altera o fundo
	}
</script>
<h1>Crie seu japamala personalizado!</h1>
<h2>Escolha a cor de cada item e clique para colorir</h2><br>
<div style="height: 220px">
	<form name="form" id="MenuContas">
		<div style="width:100px; height:100px; background-color: gray; border-radius: 50%;"></div>
		<p>Selecione</p>
			<select id="select">
				<option value="fb.png">Facebook</option>
				<option value="email.png">Email</option>
				<option value="twitter.png">Twitter</option>
			</select>
	</form>
	<div id="MenuMeru">
		<div style="width:100px; height:100px; background-color: BLUE; border-radius: 50%;"></div>
		<p>Meru</p>
	<select id="select">
			<option value="Az">Azul</option>
			<option >Branco</option>
			<option >Verde</option>
		</select>
	</div>
<form name="form2">
  <textarea name="txtarea" cols="60" rows="3"></textarea>
</form>
<input name="add" type="button" onClick="AdicionaSelect()" value="Adicionar">
</div>
<ul...

CSS

a {
color: transparent;
padding: 25px;
background-image: url(http://www.gilmardesigner.com/Imagens/social/instagram.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

li {
list-style: none;
margin-top: 45px;
}
#MenuContas {border:1px dashed; margin:0 10px; padding:10px; width:100px; float: left;}
#MenuMeru {border:1px dashed; margin:0 20px 10px 10px; padding:10px; width:100px; float: left;}
h1 {font-family:Arial;}