Trocar imagem ao por o mouse em cima

+2
Oto!
kramer.93Ø
6 participantes

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

Tópico resolvido Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 19:45

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:
Trocar imagem ao por o mouse em cima Iniciocopy
e quando passar o mouse por cima. Mudar para esse:
Trocar imagem ao por o mouse em cima Iniciocopy

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: https://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
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Oto! 21.08.11 20:40

Olá!

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

Até Mais!
Piscada
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: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 20:45

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
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg 21.08.11 20:52

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
Otaviodg

Otaviodg
Super Membro

Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 20:55

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.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 21:03

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

Spoiler:

http://baterhd.forumeiros.com/
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg 21.08.11 21:08

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 21:13, editado 1 vez(es)
Otaviodg

Otaviodg
Super Membro

Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 21:12

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.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Otaviodg 21.08.11 21:15

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
Otaviodg

Otaviodg
Super Membro

Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 21.08.11 21:21

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? .-.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por seender 21.08.11 23:09

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'
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 22.08.11 1:33

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 .-.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 22.08.11 11:00

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.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Luciano98 22.08.11 17:10

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.
Luciano98

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 22.08.11 17:16

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

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 22.08.11 19:07

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.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por kramer.93Ø 22.08.11 23:55

alguem ? .-.
kramer.93Ø

kramer.93Ø
Novo Membro

Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39

http://brasil-nl.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Trocar imagem ao por o mouse em cima

Mensagem por Dury 22.08.11 23:59

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

Até mais!
Trocar imagem ao por o mouse em cima 426228
Dury

Dury
Membro Entusiasta
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


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