Trocar imagem ao por o mouse em cima

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

Resolvido Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 03:45 pm

Qual é minha questão:
Bom estou tentando de tudo para fazer isso, mais n está tendo sucesso então decidi recorrer aqui ao FdF, tipo meu ícone do portal é esse:

e quando passar o mouse por cima. Mudar para esse:


eu tentei fazer mais qdo eu faço ele adicona o segundo botão atrás de todos os outros botões, e qdo passa o mouse por cima a primeira imagem não some.
Alguem poderia me ensinar como por desse jeito e como por em cada botão ? exemplo: início, portal, FAQ, buscar e etc.

Medidas que eu tomei para corrigir o problema:
já procurei por tudo e não deu resultado inclusive: http://ajuda.forumeiros.com/t15695-tutorial-efeito-de-opacidade-nas-imagens-do-menu

Imagens do meu problema:


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

Versão do meu fórum:
PHPBB3
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Oto! em 21/08/11, 04:40 pm

Olá!

Você alterou o devido código?
Se sim,poderia nos passar?

Até Mais!
Piscada
avatar

Oto!
Hiperativo

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

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

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 04:45 pm

Mr.Helper escreveu:Olá!

Você alterou o devido código?
Se sim,poderia nos passar?

Até Mais!
Piscada

eu usei o seguinte código

a.mainmenu {
background:url(IMAGEM);
cursor:allowed;
}
a.mainmenu:hover {
background:url(IMAGEM_HOVER);
cursor:allowed;
}

e qdo eu uso ele ele não muda o q eu qro em compensação cria uma imagem atrás de todos os outros ícones, o fórum é PHPBB3
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg em 21/08/11, 04:52 pm

Olá, teste isso:

Código:
ul.linklist li a img {
background:url(IMAGEM);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(IMAGEM_HOVER);
cursor:allowed;
}

Faça cada um para uma imagem

Não tenho certeza que irá funcionar
avatar

Otaviodg
Membro do Fórum

Masculino
Inscrito dia : 11/06/2011
Mensagens : 1295
Pontos Ativos : 1735

Ver perfil do usuário

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 04:55 pm

@Otaviodg escreveu:Olá, teste isso:

Código:
ul.linklist li a img {
background:url(IMAGEM);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(IMAGEM_HOVER);
cursor:allowed;
}

Faça cada um para uma imagem

Não tenho certeza que irá funcionar

vou tentar aki qualquer coisa aviso.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 05:03 pm

Botei o seguinte tópico e olha como ficou, a imagem normal não some quando passo o mouse por cima.

Spoiler:
ul.linklist li a img {
background:url(http://img692.imageshack.us/img692/3819/iniciocopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img714.imageshack.us/img714/3819/iniciocopy.png);
cursor:allowed;
}

ul.linklist li a img {
background:url(http://img814.imageshack.us/img814/4214/portalcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img819.imageshack.us/img819/4214/portalcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img3.imageshack.us/img3/2079/faqcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img842.imageshack.us/img842/2079/faqcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img94.imageshack.us/img94/3926/buscarcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img706.imageshack.us/img706/3926/buscarcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img814.imageshack.us/img814/2433/membroscopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img31.imageshack.us/img31/2433/membroscopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img508.imageshack.us/img508/1863/gruposcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img846.imageshack.us/img846/1863/gruposcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img821.imageshack.us/img821/6191/perfilcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img829.imageshack.us/img829/6191/perfilcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img684.imageshack.us/img684/8527/mensagenscopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img600.imageshack.us/img600/8527/mensagenscopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img23.imageshack.us/img23/4996/novamensagemcopye.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img801.imageshack.us/img801/8930/novamensagemcopy.png);
cursor:allowed;
}

ul.linklist li a img {
background:url(http://img594.imageshack.us/img594/7895/saircopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(http://img269.imageshack.us/img269/7895/saircopy.png);
cursor:allowed;
}

http://baterhd.forumeiros.com/
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg em 21/08/11, 05:08 pm

Bom, acho que conseguimos fazer a iniciativa Piscada

agora vamos ver o que está fazendo com que de errado e se é possível tirar aquele fundo.


Edit:
Substitua para este código

também, não sei se irá funcionar

Código:
ul.linklist li a img {
background:url(http://img692.imageshack.us/img692/3819/iniciocopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img714.imageshack.us/img714/3819/iniciocopy.png);
cursor:allowed;
}

ul.linklist li a img {
background:url(http://img814.imageshack.us/img814/4214/portalcopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img819.imageshack.us/img819/4214/portalcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img3.imageshack.us/img3/2079/faqcopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img842.imageshack.us/img842/2079/faqcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img94.imageshack.us/img94/3926/buscarcopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img706.imageshack.us/img706/3926/buscarcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img814.imageshack.us/img814/2433/membroscopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img31.imageshack.us/img31/2433/membroscopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img508.imageshack.us/img508/1863/gruposcopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img846.imageshack.us/img846/1863/gruposcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img821.imageshack.us/img821/6191/perfilcopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img829.imageshack.us/img829/6191/perfilcopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img684.imageshack.us/img684/8527/mensagenscopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img600.imageshack.us/img600/8527/mensagenscopy.png);
cursor:allowed;
}


ul.linklist li a img {
background:url(http://img23.imageshack.us/img23/4996/novamensagemcopye.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img801.imageshack.us/img801/8930/novamensagemcopy.png);
cursor:allowed;
}

ul.linklist li a img {
background:url(http://img594.imageshack.us/img594/7895/saircopy.png);
cursor:not-allowed;
}
ul.linklist a img:hover {
background:url(http://img269.imageshack.us/img269/7895/saircopy.png);
cursor:allowed;
}


Última edição por Otaviodg em 21/08/11, 05:13 pm, editado 1 vez(es)
avatar

Otaviodg
Membro do Fórum

Masculino
Inscrito dia : 11/06/2011
Mensagens : 1295
Pontos Ativos : 1735

Ver perfil do usuário

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 05:12 pm

@Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo Piscada

agora vamos ver o que está fazendo com que de errado nos outros e se é possível tirar aquele fundo.

n deram certo a imagem q ficou grande por trás e mudou, eu qro tipo q a imagem preta qdo passar o mouse emcima dela, ela suma e apareça o Azul.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg em 21/08/11, 05:15 pm

@kramer.93Ø escreveu:
@Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo Piscada

agora vamos ver o que está fazendo com que de errado nos outros e se é possível tirar aquele fundo.

n deram certo a imagem q ficou grande por trás e mudou, eu qro tipo q a imagem preta qdo passar o mouse emcima dela, ela suma e apareça o Azul.

Sim, eu percebi isso depois Piscada
avatar

Otaviodg
Membro do Fórum

Masculino
Inscrito dia : 11/06/2011
Mensagens : 1295
Pontos Ativos : 1735

Ver perfil do usuário

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 05:21 pm

@Otaviodg escreveu:
@kramer.93Ø escreveu:
@Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo Piscada

agora vamos ver o que está fazendo com que de errado nos outros e se é possível tirar aquele fundo.

n deram certo a imagem q ficou grande por trás e mudou, eu qro tipo q a imagem preta qdo passar o mouse emcima dela, ela suma e apareça o Azul.

Sim, eu percebi isso depois Piscada

alguem sabe qual é o problema? .-.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por seender em 21/08/11, 07:09 pm

Olá!

Utilize este código:
Código:
#i_icon_mini_index:hover {
background:url(http://img714.imageshack.us/img714/3819/iniciocopy.png);
background-repeat: no-repeat;
}
Resolve?

Melhores cumprimentos,
seender

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 21/08/11, 09:33 pm

@seender escreveu:Olá!

Utilize este código:
Código:
#i_icon_mini_index:hover {
background:url(http://img714.imageshack.us/img714/3819/iniciocopy.png);
background-repeat: no-repeat;
}
Resolve?

Melhores cumprimentos,
seender

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'

tentei por e não foi .-.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 22/08/11, 07:00 am

se der pra por HTML pelo portal, início e pá como faria ? tentei ver um tuto q tem aki e não consegui ela só fica no ínicio(/forum) e mesmo assim não direciona.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Luciano98 em 22/08/11, 01:10 pm

Olá!

Tente o seguinte codigo CSS:
Código:
ul.linklist li a img {
background:url(IMAGEM);
cursor:allowed;
z-index:3!important
}
ul.linklist a img:hover {
background:url(IMAGEM_HOVER);
cursor:allowed;
z-index:2!important
}

Caso não funcione, utilize Javascript.

Aceda à "Gestão dos códigos JavaScript":
Painel de Controle Seta Módulos Seta Gestão dos códigos JavaScript

Clique em "Criar um novo JavaScript".

Título Seta Escolha o título que quiser
Investimento Seta Em todas as páginas

Codigo JavaScript:
$(document).ready(function(){$('a.mainmenu img[src="LINK1"]').mouseover(function(){$(this).attr('src','LINK2')})});
LINK1 = Link da imagem na qual será aplicado o efeito.
LINK2 = Link da imagem que aparecerá ao passar o mouse por cima da imagem definida no LINK1.

Clique em "Confirmar".

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

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

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 22/08/11, 01:16 pm

Pode trancar aki, achei um tuto aki, eu não estava apagando as imagems do fórum agora ficou certo.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 22/08/11, 03:07 pm

me surgiu outra dúvida, consegui fazer tudo já, porem o código java que o Luciano passou funcionou mais ele congela na segunda imagem, qdo passa o mouse demora 2 segundos e vai a outra imagem, e tipo nos ícones padrões do forumeiros já consegui fazer, mais tem mais 2 no fórum q eu ajudo q são "Rádio BNL" e "Alertas".

eu gostaria de saber se existe o "#i_icon_mini" deles ou então como desbugar o java do Luciano.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø em 22/08/11, 07:55 pm

alguem ? .-.
avatar

kramer.93Ø
Nível 3

Masculino
Inscrito dia : 20/08/2011
Mensagens : 20
Pontos Ativos : 39

Ver perfil do usuário http://brasil-nl.forumeiros.com/

Resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Dury em 22/08/11, 07:59 pm

Olá!

Kramer, não é à primeira vez que vejo você cometendo flood no fórum. Somente é permitido UPs depois de 24 horas, sendo assim você deve aguardar até lá. Se eu ver mais um UP seu antes de 24 horas conforme diz nas regras de uso deste fórum, terei a obrigação de enviar seu tópico para Lixeira!

Sobre sua questão, talvez obtenha o que precise lendo este tutorial: http://ajuda.forumeiros.com/-t21619.htm

Até mais!
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

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