Efeito hover no menu

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

Resolvido Efeito hover no menu

Mensagem por King Gz; em 21/11/11, 06:04 am

Qual é minha questão:
Olá,

Vi em alguns foruns aqueles botões fórum, portal, faq etc .. que ao você passar o mouse por cima a imagem ganha um brilho, ou seja, outra imagem.

Queria muito saber como se faz isto, grato.

Medidas que eu tomei para corrigir o problema:
-

Imagens do meu problema:
-

Endereço do meu fórum:
http://ajuda.forumeiros.com/forum

Versão do meu fórum:
PHPBB2
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por Luks_Ponte em 21/11/11, 10:56 am

É um efeito de opacidade. '-'
Veja: http://ajuda.forumeiros.com/t15695-tutorial-efeito-de-opacidade-nas-imagens-do-menu
PS: N tenho ctz ctz que é esse..
avatar

Luks_Ponte
Nível 10

Masculino
Inscrito dia : 22/10/2010
Mensagens : 276
Pontos Ativos : 411

Ver perfil do usuário http://brasilplaylife.forumeiros.net/forum.htm

Resolvido Re: Efeito hover no menu

Mensagem por Cream em 21/11/11, 12:30 pm

Olá,

Você poderá utilizar o seguinte código:
a.mainmenu:hover {
background-image: url('link-da-imagem');
}
Violeta -> Troque pelo link da imagem ao passar o mouse. Adicione o código em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 21/11/11, 12:41 pm

Olá Cream,

Não entendi muito bem este código, eu adicionei isto e a imagem na folha de estilo css, o que aconteceu foi que a imagem que eu coloquei neste código apareceu por de baixo dos outros botões, como faço para substituir a imagem ao passar o mouse? E como coloco uma imagem para substituir cada botão, ou seja, uma substituindo o forum, outra substituindo o portal, etc ..
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por Cream em 21/11/11, 12:58 pm

Olá!

Veja as classes CSS ligadas à cada imagem do menu:

#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_portal { Corresponde à imagem portal.
#i_icon_mini_calendar { Corresponde à imagem calendário.
#i_icon_mini_faq { Corresponde à imagem Faq/Perguntas e respostas criadas por si no painel de controle.
#i_icon_mini_search { Corresponde à imagem buscar.
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_members { Corresponde à imagem de membros do fórum.
#i_icon_mini_groups { Corresponde à imagem grupos.
#i_icon_mini_profile { Corresponde à imagem perfil.
#i_icon_mini_message { Corresponde à imagem do link do menu MP.
ul.navlinks span.new-message { Corresponde à imagem do link do menu Nova MP.
#i_icon_mini_logout { Corresponde à imagem do link do menu Sair.
i_icon_mini_login { Corresponde à imagem do link do menu Login/Entrar.
i_icon_mini_register { Corresponde à imagem do link do menu Registrar/Cadastrar.

Agora para colocar uma imagem para exibir quando passar o mouse em cima do link veja:

#i_icon_mini_message:hover {
background-image: url(Endereço_da_sua_imagem);
}
Isso acima é um exemplo, deverá ser modificado a parte "#i_icon_mini_message", dependendo da escolha das classes.

O código depois de produzido, deverá ser adicionado em:
Painel de controle Flecha ajudeiros Visualização Flecha ajudeiros Imagens e cores Flecha ajudeiros Cores / Folha estilo CSS

Confirme se ainda necessita de suporte adicional Piscada

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 21/11/11, 01:19 pm

Agora ficou bem esclarecido De bem com a vida

Mais a imagem que no caso iria por cima na hora de passar o mouse ficou por baicho, como arrumo isto? rsrs
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por Cream em 21/11/11, 01:21 pm

Enigma; escreveu:Agora ficou bem esclarecido De bem com a vida

Mais a imagem que no caso iria por cima na hora de passar o mouse ficou por baicho, como arrumo isto? rsrs
Olá amigo,

Poderia me esclarescer o que houve?
Se puder me apresentar uma imagem...

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 21/11/11, 10:25 pm

Creio que não seja necessário uma imagem, tentarei explicar

Eu fiz o teste, peguei a imagem do portal e coloquei para substituir a do forum ao passar o mouse, e a imagem não modificou, apenas ficou um pouquinho mais claro e deu para ver que o botão portal ficou por baixo do botão Forum.

Queria saber como faz para colocar por cima ao passar a mouse entende? rsrs
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por Cream em 24/11/11, 12:37 pm

Olá,

Tente com este código:
Código:
CLASSE:hover {
background-image: url(Endereço_da_sua_imagem) !important;
position: fixed !important;
}
Troque "Endereço_da_sua_imagem" pelo link de sua imagem que vai aparecer no modo hover. E troque "Classe" pela classe que receberá o hover nos ícones. Adicione o código em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Até mais!
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 24/11/11, 01:26 pm

Fiz a mesma coisa que antes, coloquei a imagem do portal para aparecer no botão 'forum', o que aconteceu foi que o portal apareceu mais o 'forum' apareceu por baixo e o botão portal desapareceu.
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 25/11/11, 07:06 pm

Up's
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por DarkDoki em 26/11/11, 01:54 pm

Ai Me ajudou Mt Tbm vlw

DarkDoki
Nível 10

Masculino
Inscrito dia : 01/11/2011
Mensagens : 250
Pontos Ativos : 390

Ver perfil do usuário http://darkcheatsbr.com

Resolvido Re: Efeito hover no menu

Mensagem por henriquebr em 27/11/11, 05:39 pm

ESSE TOPICO JÁ EXISTE! USE O SISTEMA DE BUSCA ANTES DE PERGUNTAR!
http://ajuda.forumeiros.com/t47554-botoes-do-menu-com-imagem-hover
avatar

henriquebr
Usuário avançado

Masculino
Inscrito dia : 20/10/2011
Mensagens : 497
Pontos Ativos : 740

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

Resolvido Re: Efeito hover no menu

Mensagem por King Gz; em 27/11/11, 05:48 pm

@henriquebr escreveu:ESSE TOPICO JÁ EXISTE! USE O SISTEMA DE BUSCA ANTES DE PERGUNTAR!
http://ajuda.forumeiros.com/t47554-botoes-do-menu-com-imagem-hover

Ja fiz este procedimento no qual não deu o efeito que queria, por isto abri este tópico! Feliz
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Efeito hover no menu

Mensagem por webpixel em 28/11/11, 09:58 am

São duas imagens
Uma normal e outra com mais brilho
Tente colocar isso
Tipo um .gif
avatar

webpixel
Nível 5

Masculino
Inscrito dia : 28/11/2011
Mensagens : 59
Pontos Ativos : 82

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

Resolvido Re: Efeito hover no menu

Mensagem por Oto! em 28/11/11, 10:02 am

Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!
avatar

Oto!
Hiperativo

Inscrito dia : 07/04/2011
Mensagens : 3363
Pontos Ativos : 4818

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

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 28/11/11, 03:00 pm

Olá,

Código:
CLASSE:hover;mouse.effect; {
background-image: url(Endereço_da_sua_imagem) !important;
position: fixed !important;
}

Tente este.



Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por henriquebr em 28/11/11, 03:05 pm

Mr.Helper escreveu:Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!

opa, oks, nao quis ser grosseiro, é pq na hora em que respondi meu caps tava ligado xD
avatar

henriquebr
Usuário avançado

Masculino
Inscrito dia : 20/10/2011
Mensagens : 497
Pontos Ativos : 740

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

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 28/11/11, 03:09 pm

@henriquebr escreveu:
Mr.Helper escreveu:Olá henriquebr!

Tenha mais respeito com os membros deste fórum, sua mensagem foi um pouco grosseira, não utilize na mensagem inteira em letra maiúscula. Conte como uma advertência.

Abraços!

opa, oks, nao quis ser grosseiro, é pq na hora em que respondi meu caps tava ligado xD

Olá,

De qualquer forma, a sua linguagem, a maneira que escreveste, deu está impressão. De qualquer forma, todos nós temos dúvidas, e devemos tira-las, já que aqui é um suporte à dúvidas do serviço Forumeiros e Você.


Muito feliz
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por webpixel em 28/11/11, 04:13 pm

Vou usar o codigo ali , vaaaleu Feliz
Me ajudou tambem
avatar

webpixel
Nível 5

Masculino
Inscrito dia : 28/11/2011
Mensagens : 59
Pontos Ativos : 82

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

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

- Tópicos similares

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