Efeito hover nos botões do menu

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Efeito hover nos botões do menu

Mensagem por br.uno em 11/01/19, 02:30 pm

Detalhes da questão


Endereço do fórum: http://aguilda.forumeiros.com/
Versão do fórum: phpBB2

Descrição


olá!

ontem eu apliquei este efeito no menu do meu fórum e eu gostaria que, sempre que o botão "pulasse", ele mudasse de cor.

este é o botão sem efeito:



este é com o efeito, como eu quero que fique quando ele "pula":



eu preciso criar uma imagem com os dois botões?

valeu, pessoas!
avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny em 11/01/19, 06:00 pm

Boa tarde,

Sim, você vai ter que criar mais imagens nesse estilo para podermos prosseguir. No caso, uma para cada um dos botões.
avatar

Key of Destiny
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 250
Pontos Ativos : 405

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 12/01/19, 01:47 am

o espaço entre os dois botões precisa ser igual ao tamanho do pulo? 5 pixels, no caso. e o nome do efeito é hover mesmo?
avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. em 12/01/19, 01:23 pm

Olá!

Desenvolvi um pequeno código para conseguir esse efeito:
Crie um novo JavaScript com investimento em todas as páginas:

Código:
//* @author RafaelS.
//* @see http://www.ajuda.forumeiros.com
//* adding hover effect to nav links
$(function() {
 
var initindex = $('img#i_icon_mini_index').attr("src");
var forumhover = "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png";
 
 
$( "a.mainmenu" ).mouseenter(function() {
$(this).find('img#i_icon_mini_index').attr("src", forumhover);
});
$( "a.mainmenu" ).mouseleave(function() {
$(this).find('img#i_icon_mini_index').attr("src",initindex);
});
});

Até mais. Feliz

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4552
Pontos Ativos : 5615

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 13/01/19, 12:44 pm

muito obrigado, rafa!

agora como eu posso expandir o código para todos os botões? eu quero tentar aprender, mas se precisar, os botões seguem aí embaixo.

Spoiler:



















avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny em 13/01/19, 08:53 pm

Boa noite,

Peço que substitua o código que o Rafael lhe passou por esse. Talvez demore um pouco para o efeito aparecer, mas acredito que ele está funcionando para todos.

Código:
$(function () {
    var image = [
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo51.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo52.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo53.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo54.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo55.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo56.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo57.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo58.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo60.png'
    ];

    $('a.mainmenu').hover(function () {
            var $this = $(this),
                id = $this.find('img').attr('id'),
                src = $this.find('img').attr('src'),
                split = id.split('i_icon_mini_').join('');

            if (split == 'index') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[0]);
                });
            }

            if (split == 'login') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[1]);
                });
            }

            if (split == 'faq') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[2]);
                });
            }

            if (split == 'calendar') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[3]);
                });
            }

            if (split == 'members') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[4]);
                });
            }

            if (split == 'search') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[5]);
                });
            }

            if (split == 'logout') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[6]);
                });
            }

            if (split == 'profile') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[7]);
                });
            }

            if (split == 'register') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[8]);
                });
            }

            if (split == 'message') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[9]);
                });
            }

            if (split == 'group') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[10]);
                });
            }

            $this.mouseleave(function () {
                    $this.find('img').attr('src', src);
            });

    });
});

Uma dica: criei uma conta no seu fórum para fazer o teste com os demais botões e alguns deles, como o FAQ e Grupos não estão visíveis para usuários. Tive que fazer alguns "chutes" no código por conta disso.  Rindo
avatar

Key of Destiny
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 250
Pontos Ativos : 405

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 14/01/19, 03:35 am

muito obrigado pela ajuda, key!

o único botão que não funcionou foi o grupo, mas teve esse tempo maior de resposta que você disse... não é possível usar o mesmo código que o rafael mandou aplicado em todos os botões? com ele o efeito é praticamente imediato.
avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. em 14/01/19, 06:12 pm

Olá @br.uno

Troque o código que eu lhe passei por este:
Código:
$(function() {
 
var ReplaceLink = [
          {selector: "img#i_icon_mini_index", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //FORUM
          {selector: "img#i_icon_mini_profile", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //PERFIL
          {selector: "img#i_icon_mini_message", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png"} //MPs
];
 
    $.each(ReplaceLink, function(key, value) {
      var initbutton = $(value.selector).attr("src");
      $( "a.mainmenu" ).mouseenter(function() {
        $(this).find(value.selector).attr("src", value.imageURL);
       
      });
      $( "a.mainmenu" ).mouseleave(function() {
        $(this).find(value.selector).attr("src", initbutton);
      });
  });
 
});

Procure pela configuração ReplaceLink no código e verá que eu já coloquei o efeito em 3 botões.
Experimente fazer para os restantes botões, se não conseguir eu farei todos. Feliz

Até mais.




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4552
Pontos Ativos : 5615

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno Ontem à(s) 01:37 am

não consegui, bixo =/ parece tão simples, tou bem frustrado ahahaha se você puder fazer com todos os botões, por favor, eu ficarei grato e verei onde errei.
avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. Ontem à(s) 11:44 am

Olá!

Está aqui o código inteiro! Espero que não tenha esquecido de nenhum:
Código:
$(function() {
 
var ReplaceLink = [
          {selector: "img#i_icon_mini_index", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //FORUM
          {selector: "img#i_icon_mini_profile", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo57.png"}, //PERFIL
          {selector: "img#i_icon_mini_members", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo54.png"}, //MEMBROS
          {selector: "img#i_icon_mini_search", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo55.png"}, //BUSCA
          {selector: "img#i_icon_mini_logout", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo56.png"}, //SAIR
        {selector: "img#i_icon_mini_login", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo51.png"}, //SAIR
          {selector: "img#i_icon_mini_faq", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo52.png"}, //FAQ
        {selector: "img#i_icon_mini_calendar", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo53.png"}, //CALENDARIO
        {selector: "img#i_icon_mini_register", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo58.png"}, //REGISTRAR-SE
          {selector: "img#i_icon_mini_message", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png"} //MPs
];
 
    $.each(ReplaceLink, function(key, value) {
      var initbutton = $(value.selector).attr("src");
      $( "a.mainmenu" ).mouseenter(function() {
        $(this).find(value.selector).attr("src", value.imageURL);
     
      });
      $( "a.mainmenu" ).mouseleave(function() {
        $(this).find(value.selector).attr("src", initbutton);
      });
  });
 
});

Até mais. Feliz




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4552
Pontos Ativos : 5615

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno Ontem à(s) 04:08 pm

censurado... eu não coloquei a vírgula no final da linha com o link dos botões. obrigado, rafael e key, por me ajudarem!

podem mandar esse tópico pra conta.
avatar

br.uno
Nível 5

Masculino
Inscrito dia : 04/02/2016
Mensagens : 56
Pontos Ativos : 95

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Roger123 Ontem à(s) 04:09 pm

Tópico resolvido


Movido para "Questões resolvidas".
avatar

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 480
Pontos Ativos : 619

Ver perfil do usuário http://jogosemaisjogos.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum