Efeito hover nos botões do menu

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!

Boa tarde,

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

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?

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.

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

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:

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.  

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.

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.

Até mais.

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.

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.

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.