InícioTrocar imagem ao por o mouse em cima
+2
Oto!
kramer.93Ø
6 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Trocar imagem ao por o mouse em cima
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:
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: 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
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: 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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por Oto! 21.08.11 20:40
Olá!
Você alterou o devido código?
Se sim,poderia nos passar?
Até Mais!
Você alterou o devido código?
Se sim,poderia nos passar?
Até Mais!
Oto!- Hiper Membro
- Membro desde : 07/04/2011
Mensagens : 3363
Pontos : 4818 -
Re: Trocar imagem ao por o mouse em cima
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!
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por Otaviodg 21.08.11 20:52
Olá, teste isso:
Faça cada um para uma imagem
Não tenho certeza que irá funcionar
- 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- Super Membro
- Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738
Re: Trocar imagem ao por o mouse em cima
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
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.
http://baterhd.forumeiros.com/
- Spoiler:
- ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img692/3819/iniciocopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img714/3819/iniciocopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img814/4214/portalcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img819/4214/portalcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img3/2079/faqcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img842/2079/faqcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img94/3926/buscarcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img706/3926/buscarcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img814/2433/membroscopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img31/2433/membroscopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img508/1863/gruposcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img846/1863/gruposcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img821/6191/perfilcopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img829/6191/perfilcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img684/8527/mensagenscopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img600/8527/mensagenscopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img23/4996/novamensagemcopye.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img801/8930/novamensagemcopy.png);
cursor:allowed;
}
ul.linklist li a img {
background:url(https://2img.net/r/ihimizer/img594/7895/saircopy.png);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(https://2img.net/r/ihimizer/img269/7895/saircopy.png);
cursor:allowed;
}
http://baterhd.forumeiros.com/
kramer.93Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por Otaviodg 21.08.11 21:08
Bom, acho que conseguimos fazer a iniciativa
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
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- Super Membro
- Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738
Re: Trocar imagem ao por o mouse em cima
por kramer.93Ø 21.08.11 21:12
Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por Otaviodg 21.08.11 21:15
kramer.93Ø escreveu:Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo
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
Otaviodg- Super Membro
- Membro desde : 12/06/2011
Mensagens : 1295
Pontos : 1738
Re: Trocar imagem ao por o mouse em cima
por kramer.93Ø 21.08.11 21:21
Otaviodg escreveu:kramer.93Ø escreveu:Otaviodg escreveu:Bom, o Cadastrar e o Entrar deu certo
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
alguem sabe qual é o problema? .-.
kramer.93Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por seender 21.08.11 23:09
Olá!
Utilize este código:
Melhores cumprimentos,
seender
Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
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;
}
Melhores cumprimentos,
seender
Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
seender- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Re: Trocar imagem ao por o mouse em cima
por kramer.93Ø 22.08.11 1:33
seender escreveu:Olá!
Utilize este código:Resolve?
- Código:
#i_icon_mini_index:hover {
background:url(http://img714.imageshack.us/img714/3819/iniciocopy.png);
background-repeat: no-repeat;
}
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
por Luciano98 22.08.11 17:10
Olá!
Tente o seguinte codigo CSS:
Caso não funcione, utilize Javascript.
Aceda à "Gestão dos códigos JavaScript":
Painel de Controle
Módulos Gestão dos códigos JavaScript
Clique em "Criar um novo JavaScript".
Título Escolha o título que quiser
Investimento Em todas as páginas
Codigo JavaScript:
LINK2 = Link da imagem que aparecerá ao passar o mouse por cima da imagem definida no LINK1.
Clique em "Confirmar".
Até mais.
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
Módulos Gestão dos códigos JavaScriptClique em "Criar um novo JavaScript".
Título
Escolha o título que quiserInvestimento
Em todas as páginasCodigo JavaScript:
LINK1 = Link da imagem na qual será aplicado o efeito.$(document).ready(function(){$('a.mainmenu img[src="LINK1"]').mouseover(function(){$(this).attr('src','LINK2')})});
LINK2 = Link da imagem que aparecerá ao passar o mouse por cima da imagem definida no LINK1.
Clique em "Confirmar".
Até mais.
Luciano98- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Trocar imagem ao por o mouse em cima
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Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
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.
eu gostaria de saber se existe o "#i_icon_mini" deles ou então como desbugar o java do Luciano.
kramer.93Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
kramer.93Ø- Novo Membro
- Membro desde : 20/08/2011
Mensagens : 20
Pontos : 39 -
Re: Trocar imagem ao por o mouse em cima
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!
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!
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Tópicos semelhantes» problema com informações ao passar mouse em cima (mouse over)
» Mudar imagem ao passar mouse em cima
» Imagem acende com mouse em cima e volta ao normal quando ele sai
» Trocar o Ponteiro do mouse!
» Como aparecer imagem ao passar o mouse em cima do menu
» Mudar imagem ao passar mouse em cima
» Imagem acende com mouse em cima e volta ao normal quando ele sai
» Trocar o Ponteiro do mouse!
» Como aparecer imagem ao passar o mouse em cima do menu
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos