Efeito hover no menu

+3
DarkDoki
Cream
King Gz;
7 participantes

Ir para baixo

Tópico resolvido Efeito hover no menu

Mensagem por King Gz; 21.11.11 8:04

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:
https://ajuda.forumeiros.com/forum

Versão do meu fórum:
PHPBB2
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Convidado 21.11.11 12:56

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


Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Cream 21.11.11 14:30

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!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 21.11.11 14:41

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 ..
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Cream 21.11.11 14:58

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!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 21.11.11 15:19

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
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Cream 21.11.11 15:21

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!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 22.11.11 0:25

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
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Cream 24.11.11 14:37

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!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 24.11.11 15:26

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.
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 25.11.11 21:06

Up's
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por DarkDoki 26.11.11 15:54

Ai Me ajudou Mt Tbm vlw
avatar
DarkDoki
****

Membro desde : 01/11/2011
Mensagens : 251
Pontos : 393

http://darkcheatsbr.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por henriquebr 27.11.11 19:39

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

Membro desde : 20/10/2011
Mensagens : 497
Pontos : 740

http://rmbr.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por King Gz; 27.11.11 19:48

henriquebr escreveu:ESSE TOPICO JÁ EXISTE! USE O SISTEMA DE BUSCA ANTES DE PERGUNTAR!
https://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
King Gz;
King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por webpixel 28.11.11 11:58

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

Membro desde : 28/11/2011
Mensagens : 59
Pontos : 82

http://webpixelforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Oto! 28.11.11 12:02

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!
Oto!
Oto!
Hiper Membro

Membro desde : 07/04/2011
Mensagens : 3363
Pontos : 4818

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Konai 28.11.11 17:00

Olá,

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

Tente este.

Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por henriquebr 28.11.11 17:05

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
henriquebr
henriquebr
*****

Membro desde : 20/10/2011
Mensagens : 497
Pontos : 740

http://rmbr.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por Konai 28.11.11 17:09

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
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no menu

Mensagem por webpixel 28.11.11 18:13

Vou usar o codigo ali , vaaaleu Feliz
Me ajudou tambem
webpixel
webpixel
**

Membro desde : 28/11/2011
Mensagens : 59
Pontos : 82

http://webpixelforum.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos