Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosComo aparecer imagem ao passar o mouse em cima do menu
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Como aparecer imagem ao passar o mouse em cima do menu
por [L]eleuh 05.02.11 21:33
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):
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):
![[L]eleuh](https://2img.net/u/2612/28/77/07/avatars/34483-3.jpg)
[L]eleuh- ***
- Membro desde : 20/11/2010
Mensagens : 134
Pontos : 226 -
Re: Como aparecer imagem ao passar o mouse em cima do menu
por Side 06.02.11 0:53
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:
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.
Após ter adicionado todos os códigos
e pronto!
Resolve?
Até mais,
Kill3r
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;}
- 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]
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;}
- 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;}
- 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;}
Após ter adicionado todos os códigos
e pronto!Resolve?
Até mais,
Kill3r
Side- Membro
- Membro desde : 28/11/2010
Mensagens : 733
Pontos : 1040 -
Re: Como aparecer imagem ao passar o mouse em cima do menu
por [L]eleuh 06.02.11 2:28
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.
Quero que fiquem atrás dele, e com isso o meu ficou muito aberto.
[L]eleuh- ***
- Membro desde : 20/11/2010
Mensagens : 134
Pontos : 226 -
Re: Como aparecer imagem ao passar o mouse em cima do menu
por Side 06.02.11 14:45
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
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
Side- Membro
- Membro desde : 28/11/2010
Mensagens : 733
Pontos : 1040 -
Re: Como aparecer imagem ao passar o mouse em cima do menu
por [L]eleuh 06.02.11 15:11
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.
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.
[L]eleuh- ***
- Membro desde : 20/11/2010
Mensagens : 134
Pontos : 226 -
Re: Como aparecer imagem ao passar o mouse em cima do menu
por Callie 06.02.11 15:38
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.
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.
Callie- Membro Entusiasta
- Membro desde : 20/12/2009
Mensagens : 5007
Pontos : 7285
Tópicos semelhantes» Aparecer menu ao passar mouse por cima do nome
» Como aparecer menu em link quando passar o mouse
» [Resolvido] Mudar a cor da imagem do menu ao passar o mouse
» Aparecer nome ao passar mouse
» Passar o mouse aparecer perfil do membro
» Como aparecer menu em link quando passar o mouse
» [Resolvido] Mudar a cor da imagem do menu ao passar o mouse
» Aparecer nome ao passar mouse
» Passar o mouse aparecer perfil do membro
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos