Efeito hover menu de navegação

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

Resolvido Efeito hover menu de navegação

Mensagem por diogo23 em 16/12/11, 12:57 pm

Qual é minha questão:
queia que o menu de navegação tivesse uma imagem enquanto não tem o rato/mouse em cima mas quando tem o rato em cima outra...

Medidas que eu tomei para corrigir o problema:
coloca este post

Imagens do meu problema:
-

Endereço do meu fórum:


Versão do meu fórum:
PHPBB3


Última edição por diogo23 em 16/12/11, 06:47 pm, editado 1 vez(es)
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por Cream em 16/12/11, 02:03 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 menu de navegação

Mensagem por diogo23 em 16/12/11, 02:49 pm

mas isso não funciona....acho eu...por exemplo eu queria colocar esta imagem para o menu de navegação "inicio" enquanto o rato não estivesse em cima:
e esta para quando o rato estiver em cima:
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 16/12/11, 02:50 pm

sem o rato estar em cima: http://illiweb.com/fa/pbucket.gif
com o rato em cima: http://illiweb.com/fa/pbucket.gif
como faço?
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 16/12/11, 05:16 pm

o que eu fiz foi: 1º adicionei normalmente a imagem em visualização > Gestão das imagens > Modo avançado e aí coloquei normalmente a imagem quando o rato não está em cima e depois de fazer isso é que coloquei o código com a imagem que é para aparecer quando o rato está em cima.... só que descobri que afinal a imagem onde o rato está em cima aparece mas é atrás da imagem que eu fiz para aparecer enquanto o rato não está em cima..... ajudam-me... Ajuda/Confuso
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 16/12/11, 06:35 pm

ajudem-me pf.... Triste Chorando ou muito tr
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por Lucas2122 em 17/12/11, 10:16 am

Cuidado com o flood !
avatar

Lucas2122
Usuário destaque

Masculino
Inscrito dia : 16/08/2011
Mensagens : 774
Pontos Ativos : 1348

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

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 17/12/11, 10:16 am

que é flood?
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por Gaaratsu em 17/12/11, 10:28 am

Olá,

O que é Flood?
Spoiler:

Flood

Muitos realizam flood, e que por vezes nem sabem quais os erros dessas mensagens que são sempre denunciadas, por vezes por alguém que também desconhece o verdadeiro significado do termo, e que não sabe o que é. Para desmistificar todos os segredos, e em vista a esclarecer todos os usuários do Fórum dos Fóruns, criei este tópico.





  • O que é flood?
Flood é caracterizado normalmente como mensagens de conteúdo irrelevante para o tópico em que estão inseridas, ainda que, enquadradas noutro assunto, possam ter bom conteúdo. Também existe o sentido de mensagem inútil e/ou sem conteúdo.
Por exemplo, postar uma mensagem com um tutorial de Photoshop num tópico que fala acerca de scripts, não tem qualquer relevância, ainda que, num fórum em que se debata Design este possa ter bom conteúdo.



  • Os "Up's" também são Flood?
Os populares "Up's" também são considerados como Flood quando são usados fora da seção de suporte e em menos de 24 horas em um tópico sem respostas.



  • Por que o flood é proibido?
A prática de flood está censurada porque, primeiramente, causa sempre grandes discussões. Em segundo, prejudica todo o sistema do Fórum dos Fóruns, carregando-o de lixo. Além disso, dificultam muito a leitura dos tópicos, visto que estes estão cheios de mensagens desnecessárias, fazendo com que a rapidez de resolução de problemas seja muito menor, e o tempo a ler essas mesmas mensagens seja gasto desnecessariamente.
Imagine o que seria caso o mesmo não fosse permitido. Acha que conseguiria informações úteis para seu fórum? Pensa que iria encontrar algo aqui? Tem a certeza que se iria registrar, vendo tanta mensagem inútil?




  • Que tipo de mensagens são consideradas flood?


    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Após haver uma resposta na sua dúvida, todos os usuários são responsáveis por indicar se a mesma está resolvida ou não. Contudo, nem sempre é melhor a forma de agradecimento, como por exemplo "vlw mano", "funfo" e "brigado".Agradecimentos podem ser efetuados de uma forma simples: "obrigado". Evite essas mensagens.
    Na área de "Galerias", apenas faça a crítica das imagens, apontando os erros e também o que pode melhorar, não somente apenas dizendo "legal", "gostei", "vlw" ou "mt bom".

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Apenas smileys numa mensagem são flood. Estes não devem ser muitos por cada mensagem, e devem estar de acordo com as frases, que devem ter assuntos relevantes para o fórum.

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Somente risadas, como "lol", "kkkk" e "rsrsrs" nunca devem ser postados. Pode até achar graça a algum tópico ou mensagem, mas ria-se para si. Os outros usuários não necessitam de saber quais os sentimentos, até porque, por vezes, e quando não é o objectivo de um tópico ou mensagem, você pode "insultar", com a sua risada, os usuários em questão.

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Numa mensagem, não devem só constar imagens. Caso lhe peçam, por exemplo, uma screenshot para melhor resolução da sua dúvida, deve sempre legendar a imagem e explicar os fenômenos que nela acontecem.

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Os famosos "clique aqui", tanto para jogos online, como propagandas, jogos de dinheiro ou outros, são flood e serão excluídos o mais rapidamente possível. Ainda que seguidos de tutoriais para informar os usuários de como funcionam esses serviços, estas mensagens são consideradas infrações.

  • Comentários fora do contexto principal do tópico são considerados flood. Evite esses comentários, ou abra novos posts, nos devidos sub-fóruns específicos, nunca esquecendo as regras de cada um deles.



  • Fiz flood, o que fazer?
Caso você faça flood, poderá apagar as suas mensagens, desde que dentro do limite, clicando em . Caso contrário, poderá editar e reformular a sua mensagem. Caso não consiga fazê-lo, poderá pedir a um dos responsáveis pela área para que apaguem a sua mensagem.




  • Dicas para evitar o flood


    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Não cite mensagens com o intuito de responder simplesmente que concorda com o usuário;

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Não utilize somente imagens ou smileys na sua resposta;

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Evite postar duas mensagens seguidas. Prefira editar as suas mensagens;

    <LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Evite postar mensagens muito curtas;

  • Não faça comentários particulares a outros usuários nos tópicos, isso deve ser feito através de MP.

Tente;

Código:
a.button2, body:last-child a.button1, button.button2, input.button1, input.button2 :hover {
background-image: url(http://illiweb.com/fa/pbucket.gif) !important;
background-position: bottom left;
}
Coloque este código em;
Painel de Controle Visualização Aba " Imagens e Cores " Cores Folha de Estilo CSS
Vale lembrar que o código já está com a sua segunda imagem.

Coloque a primeira imagem que seria está no
Painel de controle Visualização Aba " Imagens e Cores " Gestão das Imagens " Modo Avançado " e procure por ; Indice e ponha a URL lá.

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 menu de navegação

Mensagem por diogo23 em 17/12/11, 11:39 am

não funcionou :c
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 17/12/11, 11:42 am

eu coloquei a 1ª na gestão de imagens indice e depois introduzi esse código conforme me mandou mas não funcionou..... Triste
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por Cream em 17/12/11, 12:40 pm

Olá,

Tente o seguinte código:
Código:
#i_icon_mini_index {background-image: url('http://illiweb.com/fa/pbucket.gif') !important;}
#i_icon_mini_index:hover {background-image: url('http://illiweb.com/fa/pbucket.gif') !important;}
Adicione 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 Duvida

Mensagem por diogo23 em 17/12/11, 12:50 pm

@Cream escreveu:Olá,

Tente o seguinte código:
Código:
#i_icon_mini_index {background-image: url('http://illiweb.com/fa/pbucket.gif') !important;}
#i_icon_mini_index:hover {background-image: url('http://illiweb.com/fa/pbucket.gif') !important;}
Adicione em:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Até mais!

mas na gestão de imagens deixo ficar na mesma a imagem?
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

Resolvido Re: Efeito hover menu de navegação

Mensagem por diogo23 em 17/12/11, 12:53 pm

não funciounou nimguém sabe como se faz versão PHPBB3...
avatar

diogo23
Nível 8

Masculino
Inscrito dia : 10/04/2011
Mensagens : 134
Pontos Ativos : 212

Ver perfil do usuário http://www.portugal-maximum.forumeiros.net

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