Como aparecer imagem ao passar o mouse em cima do menu

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

Resolvido Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por [L]eleuh em 05/02/11, 07:33 pm

Qual é sua questão:
Queria saber quando passar o mouse em cima de algum menu com faço para colocar uma imagem aparecer atrás dele.

Que medidas você tomou para corrigir o problema:
-

Apresente-nos imagens do problema (se necessário):
avatar

[L]eleuh
Nível 8

Masculino
Inscrito dia : 20/11/2010
Mensagens : 134
Pontos Ativos : 226

Ver perfil do usuário http://thenwo.forumclan.com/

Resolvido Re: Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por Side em 05/02/11, 10:53 pm

Olá.

Para fazer este efeito, você deverá adicionar vários códigos em sua Folha de Estilo CSS. Para isto, siga os seguintes passos:
Paínel de Controle Visualisação Aba Imagens e Cores Cores Folha de Estilo CSS.

Os códigos que utilizaremos são parecidos como este:
Código:
#i_icon_mini_index{width:80px; height:22px; background:url(http://i32.servimg.com/u/f32/15/52/81/80/412.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i32.servimg.com/u/f32/15/52/81/80/412.png) no-repeat 0 -22px;}

Abaixo, a lista com os Códigos na qual você deverá adicionar em tua Folha de Estilo Css:

Ps: Não se esqueça de adicionar os links das imagens conforme indicado nos códigos.

Spoiler:
Index/Inicio
Código:
#i_icon_mini_index{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat 0 -22px;}

Código:
[b]Portal[/b]
#i_icon_mini_portal{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Galeria
Código:
#i_icon_mini_gallery{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Cálendário
Código:
#i_icon_mini_calendar{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

FAQ
Código:
#i_icon_mini_faq{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}
Buscar/Procurar
Código:
#i_icon_mini_search{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Membros
Código:
#i_icon_mini_members{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}
[b]
[/b]
Grupos

Código:
#i_icon_mini_groups{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Perfil
Código:
#i_icon_mini_profile{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Mensagens Privadas
Código:
#i_icon_mini_message{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat 0 -22px;}

Novas Mensagens Privadas
Código:
#i_icon_mini_new_message{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}
Sair/Logout
Código:
#i_icon_mini_logout{width:34px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}

Registrar

Código:
#i_icon_mini_register{width:80px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}
Login/Entrar
Código:
#i_icon_mini_login{width:34px; height:22px; background:url(LINK DA IMAGEM ANTES DE PASSAR O MOUSE) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(LINK DA IMAGEM COM O MOUSE ENCIMA) no-repeat  0 -22px;}
NOTA: Tome cuidado na hora de adcionar os códigos, e lembre-se de colocar os links conforme indicado nos códigos.

Após ter adicionado todos os códigos e pronto!

Resolve?
Até mais,
Kill3r
avatar

Side
Usuário destaque

Masculino
Inscrito dia : 28/11/2010
Mensagens : 733
Pontos Ativos : 1040

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

Resolvido Re: Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por [L]eleuh em 06/02/11, 12:28 am

Não deu certo, as imagens ficaram no lado do menu.
Quero que fiquem atrás dele, e com isso o meu ficou muito aberto.

avatar

[L]eleuh
Nível 8

Masculino
Inscrito dia : 20/11/2010
Mensagens : 134
Pontos Ativos : 226

Ver perfil do usuário http://thenwo.forumclan.com/

Resolvido Re: Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por Side em 06/02/11, 12:45 pm

Olá novamente.

Veja o seguinte:
Paínel de Controle Visualização Aba Home Page Cabeçalho & Navegação.

Na parte "Menu de navegação das páginas", veja se a opção "Exibir apenas as imagens no menu de navegação" está marcada como não.
Se estiver marcada como não, marque como "sim". De em salvar e pronto.

Se você tiver deletado os códigos de tua Folha de Estilo Css, coloque-os novamente.

Veja agora se deu certo.
Por favor, a mensagem que postei acima, postei por engano. Se algum moderador ou membro da Staff a excluir, agradeço.

Kill3r
avatar

Side
Usuário destaque

Masculino
Inscrito dia : 28/11/2010
Mensagens : 733
Pontos Ativos : 1040

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

Resolvido Re: Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por [L]eleuh em 06/02/11, 01:11 pm

mas se eu fizer isso, teria de fazer novos botões para os botões não apertados.

Pois o fórum que eu frequento, qnd você não passa o mouse em cima, fica escrito Início, etc, não 1 imagem, e quando passa o mouse em cima, aparece um fundo para aquele tal menu.
avatar

[L]eleuh
Nível 8

Masculino
Inscrito dia : 20/11/2010
Mensagens : 134
Pontos Ativos : 226

Ver perfil do usuário http://thenwo.forumclan.com/

Resolvido Re: Como aparecer imagem ao passar o mouse em cima do menu

Mensagem por Callie em 06/02/11, 01:38 pm

Olá [L]eleuh,

Julgo que aquele tema tem um menu personalizado em css talvez e depois mudar de cor com o cursor por cima devido a um efeito hover. Não muda de imagem.

Até mais.
avatar

Callie
Principal contribuidor
Principal contribuidor

Feminino
Inscrito dia : 20/12/2009
Mensagens : 5007
Pontos Ativos : 7285

Ver perfil do usuário

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