//JS

function goto(secao) {
	window.location.href = secao + ".php";
}

function eventos()
{
	//#### CONFIGURAÇÕES:
	//#
	//## Classe a ser utilizada (coloque /entre barras/):
	var classe = /roll/;
	//## Tag dos elementos
	var tag = "li";
	//#############################
	
	//PS: Nesse caso a imagem do menu está organizada de forma vertical e vai ser trocada pela imagem ao lado direito, para casos onde a imagem está organizada na posição horizontal e vai ser trocada pela imagem de baixo troque o vetor[1] por vetor[0] para passar a posição X para as funções.
	
	var total,i;
	
	total=document.getElementsByTagName(tag); //pega todos os elementos com a tag especificada
	for(i=0;i<total.length;i++)
	{
		if(classe.test(total[i].className)) { //filtra apenas os elementos com a classe especificada
			total[i].onmouseover=function() {
				var vetor = this.style.backgroundPosition.split(" ");
				rollOver(this.id,vetor[1]); //passa para o rollover o ID e a posíção Y do background
			};
			total[i].onmouseout=function() {
				var vetor = this.style.backgroundPosition.split(" ");
				rollOut(this.id,vetor[1]); //passa para o rollout o ID e a posíção Y do background
			};
			total[i].onclick=function() {
				goto(this.id);
			}
		}
	}
}

function rollOver(id,y) {
	document.getElementById(id).style.backgroundPosition = "-320px " +y; //muda a posição X do ID especificado e repassa a posição Y
}
function rollOut(id,y) {
	document.getElementById(id).style.backgroundPosition = "0px " +y; //muda a posição X do ID especificado e repassa a posição Y
}

window.onload=function() { eventos(); } //habilita os eventos quando carregar a página