Para quem interessar

[marcos_804]

Pessoal, através de algumas ideias desenvolvi um menu que tem um estilo "Flash" na hora de transição de cores.

Estou passando o codigo. Caso queiram utilizar, sintam-se à vontade.

/*INICIO DE MENU GRADATIVO*/

var maxPassos = 10;
var corIni = new Array(51,51,51);
var corFim = new Array(140,140,140);
var gambiarra = "rgb("+ corIni +")";


var idMenu = ""; var timer = "";

function mudaMenu(idMenuOver,posPassoAtual){

    idMenu = (idMenu == "") ? idMenuOver : idMenu;
    posPassoAtual = (typeof(posPassoAtual) == 'undefined') ? 1 : posPassoAtual;

    if(posPassoAtual < maxPassos){
        posPassoAtual++;
        timer = setTimeout("mudaMenu('"+ idMenuOver +"','"+ posPassoAtual +"')",20);
    }


    document.getElementById(idMenuOver).style.backgroundColor = criaRGB(posPassoAtual);
}

function mudaMenuOff(){
    document.getElementById(idMenu).style.backgroundColor = "rgb("+ corIni[0] +", "+ corIni[1] +", "+ corIni[2] +")";
    idMenu = "";
    clearTimeout(timer);
}

function criaRGB(posPassoAtual) {

  var cor_criada=new Array(3)
  var tipo_cor;

  for(i=0;i<3;i++) {

    var tipo_cor = (corIni[i]-corFim[i]);
    cor_criada[i] = (tipo_cor > 0) ? cor_criada[i] = corIni[i]-(Math.round((tipo_cor/maxPassos))*posPassoAtual) : corIni[i]+(Math.round((Math.abs(tipo_cor)/maxPassos))*posPassoAtual);

  }

return ("rgb("+ cor_criada[0] +", "+ cor_criada[1] +", "+ cor_criada[2] +")");

}

/*FIM DE MENU QUE MUDA GRADATIVO*/

E para mostrar o menu faça assim:

<a href="#" id="menu1" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Home</a>
<a href="#" id="menu2" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Discografia</a>
<a href="#" id="menu4" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Contato</a>
<a href="#" id="menu6" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Fotos</a>

Espero que ajude. falou Até mais.

[KaKarotto]

Nossa cara que legal !!!

você fez isso sozinho ??

Posso dar uma sugestão ?

Tente implementar esse seu código de forma que tenha parâmetros, onde a pessoa escolhe a cor que vai começar e a cor que vai terminar, sem precisar mexer no código, apenas colocando parâmetros.

Se puder também implementar de forma que a pessoa não precise colocar no código html seria legal também, você treinaria usar javascript não-obstrutivo e poderia pensar em criar sua mini-biblioteca com outros efeitos que venha a desenvolver. Fazendo dessa forma, seu código ficaria bem genérico e bastaria apenas incluir em outro código que execute outras funções agregando essas novas.

AHhh...coloque seus dados, nome, email etc no início do código, ainda que deixe disponível para qualquer um usar, é interessante todos saberem quem o fez.

Muito Legal!

[BurnOS]

Ficou muito bacana mesmo!!!!!

Até já estou mexendo um pouco...

Mudei uma coisa, no onMouseOver, pra ficar sem cor de fundo, senão pode descaracterizar a página, dependendo da situação, por exemplo se o link estiver sobre um fundo degradê e só quisermos dar um destaque...

ficou assim:

function mudaMenuOff(){
    document.getElementById(idMenu).style.backgroundColor = "";
    idMenu = "";
    clearTimeout(timer);
}

E uma coisa que achei interessante pra complementar a sugestão do Kakarotto é ao invés de usar RGB, fazer por referência haxedecimal, nesse link tem uma Tabela de cores completinha, já ficam umas opções pré-definidas, pois por RGB são enézimas combinações... :P

Vlew

Abraços

Flow