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 ;
}
function Twitter(tag) {
var tag_li = document.getElementById('lista_menu');
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,imagem) {
var tag_li = document.getElementById('lista_menu');
var tag_a = tag_li.getElementsByTagName('a');
for (i = 0; i < tag_a.length; i++) {
tag_a[i].style.backgroundImage = "i";
}
tag.style.backgroundImage = "url("+imagem+")"; // altera o fundo
}
function Troca2(tag) {
var i = document.form.select.selectedIndex;
var j = document.lista_menu.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 style="float: right;">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()"...
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; padding:10px; width:100px; float: left;}
h1 {font-family:Arial;}